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Sick of creating weh sites that reloarl every time a user moves the mouse? 

I i red of servers t hat wait around to respond to users' requests for movie 
tickets? It sounds like you need a little (or maybe a loi of) Ajax in your 
life, Asyndironous programming lets you lurn your own web sites into 
smooth, slick, responsive applicaiiai^s that make your users fed like they’re 
back on tlic information sujjcrhighway* not stuck on a dial-up back road. 

But、vlu) wants to rake on nexr-generauoti web programming with tlie last 
generation's instruciion hook? Von need a learning experience that's as 
compelling and cutting-edge as ihe sites you want lo design, 1 hat s where 
we come in. Wilh Head Rush Ajax, in no lime youll be vvrilingJa%aScript 
code that Hres off asynclirunous requests to web servers..-and luuing tun 
doing it. By ihe time you vt a taken your dynamic HTML, XMl,, [SON, and 
DOM skills up a few notclics, you 11 luivc solved tons of puzzles, figured out 
how we]l snowboards sell in Vail, and even watt 1 icd a boxing inatcli. 
Sound interesting? Then what are you waiting for? Pick up Head Rush 
Ajax and learn Ajax and asynchronous programming the right way—the 
way that sticks. 

If you've ever read a Head First book, you know what to expect: a visually 
rich fbrmaL designed for die way your brain works. Head Rush ramps up 
the intensity witli an even faster look and feel. Have your first working 
app before you i\ nish Chapter 1, meet up with the nefarious PROJECT: 
CHAOS stealth leatn, and even settle ihe question ot the lop 5 Blues CDs 
of al 1 time. Leave boring，clunk) web sites behind with 8-tracks and hot 
pants — and get going with ncxl-gencration web pru^ranimiiig. 
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Praise for Head Rush Ajax 


“If you thought Ajax was rocket science, this book is for you. Head Rush Ajax puts dynamic, 
compelling experiences within reach for every web developer.” 

—— Jesse James Garrett, Adaptive Path 

“THE book for all of those web developers who want to get that Ajax attitude that everyone is 
talking about.” 

—— Valentin Crettaz, CTO Condris Technologies, Switzerland 

“Head Rush Ajax is the book if you want to cut through all the hype and learn how to make your 
web apps sparkle... your users will love you for it!” 

—— Kristin Stromberg, Aguirre International 

“This stuff is brain candy; I can’t get enough of it.” 

—— Pauline McNamara, Center for New Technologies and Education, 
Fribourg University, Switzerland 


“If you know some HTML, a dollop of CSS, a little JavaScript, and a bit of PHP, but you’re 
mystified about what all the Ajax hype is about, this is the book for you. Head Rush Ajax cuts 
through the hype and explains how to take your beginner web applications to the next level. 
Before you know it, you’ll be writing next-generation web applications, and you’ll actually 
understand how they work! 

You’ll have a blast learning Ajax with Head Rush Ajax. By the time you’ve reached the end of 
this book, all those web technologies that didn’t quite fit together in your head will all snap 
into place and you’ll have The Ajax Power! You’ll know the secrets behind some of the most 
popular web applications on the Internet. You’ll impress your friends and co-workers with your 
knowledge of how those interactive maps and web forms really work. 

I can’t imagine learning Ajax without Katie and Alex and Rufus and Jenny... all the friends 
you'll make on your fun-filled, exciting journey through Head Rush Ajax. And when you’re done, 
not only will you be able to write next-generation web applications, you’ll actually understand 
how they work.” 

—— Elisabeth Freeman, Director, Technology 
The Walt Disney Internet Group 
Co-author of Head First Design Patterns and 

Head First HTML with CSS & XHTML 






Praise for Head First HTML with CSS & XHTML 


“I *heart* Head First HTML with CSS & XHTML — it teaches you everything you need to learn 
in a Tun coated’ format!” 

—— Sally Applin, UI Designer and Fine Artist, http://sally.com. 


“This book has humor, and charm, but most importantly, it has heart. I know that sounds 
ridiculous to say about a technical book, but I really sense that at its core, this book (or at least 
its authors) really care that the reader learn the material. This comes across in the style, the 
language, and the techniques. Learning - real understanding and comprehension — on the 
part of the reader is clearly top most in the minds of the Freemans. And thank you, thank 
you, thank you, for the book’s strong, and sensible advocacy of standards compliance. It’s 
great to see an entry level book, that I think will be widely read and studied, campaign so 
eloquently and persuasively on behalf of the value of standards compliance in web page code. 
I even found in here a few great arguments I had not thought of — ones I can remember and 
use when I am asked — as I still am — ‘what’s the deal with compliance and why should we 
care?’ I’ll have more ammo now! I also liked that the book sprinkles in some basics about the 
mechanics of actually getting a web page live — FTP, web server basics, file structures, etc.” 

—— Robert Neer, Director of Product Development ， Movies.com 


“Oh, great. You made an XHTML book simple enough a CEO can understand it. What will 
you do next? Accounting simple enough my developer can understand it? Next thing you know 
we’ll be collaborating as a team or something.” 

— Janice Fraser, CEO, Adaptive Path 


“My wife stole the book. She’s never done any web design, so she needed a book like Head First 
HTML with CSS & XHTML to take her from beginning to end. She now has a list of web sites 
she wants to build — for our son’s class, our family, ... If I’m lucky, I’ll get the book back when 
she’s done.” 


David Kaminsky, Master Inventor, IBM 


“Beware. If you’re someone who reads at night before falling asleep, you’ll have to restrict Head 
First HTML with CSS & XHTML to daytime reading. This book wakes up your brain.’’ 

—— Pauline McNamara, Center for New Technologies and Education, 
Fribourg University, Switzerland 






Praise for other Head First books 


“From the awesome Head First Java folks, this book uses every conceivable trick to help you 
understand and remember. Not just loads of pictures: pictures of humans, which tend to interest 
other humans. Surprises everywhere. Stories, because humans love narrative. (Stories about things 
like pizza and chocolate. Need we say more?) Plus, it’s darned funny.” 

— Bill Camarda, READ ONLY 

“This book’s admirable clarity, humor, and substantial doses of clever make it the sort of book that 
helps even non-programmers think well about problem-solving.” 

—— Cory Doctorow, co-editor of Boing Boing 

and author of “Down and Out in the Magic Kingdom” 
and “Someone Comes to Town, Someone Leaves Town” 


“I feel like a thousand pounds of books have just been lifted off of my head.” 

—— Ward Cunningham, inventor of the Wiki 
and founder of the Hillside Group 


“This book is close to perfect, because of the way it combines expertise and readability. It speaks 
with authority and it reads beautifully. It’s one of the very few software books I’ve ever read that 
strikes me as indispensable. (I’d put maybe 10 books in this category, at the outside.)” 

—— David Gelernter, Professor of Computer Science, 

Yale University and author of 66 Mirror Worlds 55 and “Machine Beauty” 


“A Nose Dive into the realm of patterns, a land where complex things become simple, but where 
simple things can also become complex. I can think of no better tour guides than the Freemans.” 

—— Miko Matsumura, Industry Analyst, The Middleware Company 
Former Chief Java Evangelist, Sun Microsystems 


U I laughed, I cried, it moved me.” 

—— Daniel Steinberg, Editor-in-Chief, java.net 


“Just the right tone for the geeked-out, casual-cool guru coder in all of us. The right reference for 
practical development strategies —— gets my brain going without having to slog through a bunch of 
tired, stale professor-speak. 5, 


Travis Kalanick, Founder of Scour and Red Swoosh 
Member of the MIT TR100 


“I literally love this book. In fact, I kissed this book in front of my wife.” 


Satish Kumar 
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elp people become better programmers does pay 
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eigh, and his young kids, Dean and Robbie. 
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leveloped enterprise Java applications for Nextel 
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>f the Lutris Enhydra servlet engine and EJB 
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Java 5.0: A Developefs Notebook, Home Theater Hacks, Java and XML Data Binding, and Building Java 
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appLfcafioNS a n^w <?^N^afloN 

Using Ajax 

Put a new shine on your web applications. 

Tired of clunky web interfaces and waiting around for a page to reload? Well, it’s 
about time to give your web apps that pine-scented desktop application feel. What 
are we talking about? Just the newest thing to hit the Web: Ajax— asynchronous 
JavaScript and XML—and your ticket to building rich Internet applications that are 
more interactive, responsive, and easy to use. 


The Web, Reloaded 
Welcome to the new millenium 
“Reload? We don’t need no stinking reloads.’’ 

The highlight reel: Chapter 1 
Creating a request object 
PHP... at a glance 
What the server used to do... 

What the server should do now 
Initialing a connection 
Connecting to the web server 
Adding an event handler 
Coding the callback function 
How we see web apps... 

Introducing the web browser 

What should the browser do with the server’s response? 

Sending instructions to the browser 

Getting the server’s response 

Checking for the right ready state 

60 second review 
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Didn't you say that Ajax will let 
me update the screen without all 
that reloading? Something about 
updating just part of the page? 
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Ma\c?N<? Ajav 

Speaking the Language 

It’s time to learn how to speak asynchronously. 

If you’re planning on writing the next killer application, you need to understand 
Ajax inside and out. In this chapter, you’ll get the inside scoop on asynchronous 
JavaScript: you’ll learn how to send requests on different browsers, master ready 
states and status codes, and even pick up a few extra dynamic HTML tricks along 
the way. By the time you’re done, you’ll be making requests and handling responses 
like a pro... and by the way, did we mention your users won’t have to wait around 
on you while you’re learning? 
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AsYn^jKono^s Apps 


3 She Blinded Me with Asynchrony 

Waiting room? I’m sorry, we don’t have one of those. 

This is the Web, not a doctor’s office, and nobody wants to sit around reading 
a six-month old magazine while a server does its thing. You’ve seen how Ajax 
will let you get rid of page reloads, but it’s time to add responsive to the list of 
highlights for your web apps. In this chapter, you’ll learn how to send your users 5 
requests to a server, and let your users keep on working while they’re waiting 
on a response. In fact... strike that. There’ll be no waiting in this chapter at all. 
Turn the page, and let’s get started. 



HTML form 


JavaScript 


PHP script 


What does asynchronous really mean? 

Building an Ajax-powered coffee maker 
Iterative development and Ajax apps 
Moving JavaScript to external files 
Breaking up the JavaScript 
Sending an asynchronous request 
Getting the value of a radio group 

Espresso Talk: Asynchronous and Synchronous Application 
Getting the text content of a <div> 

Setting the text content of a <div> 

Clearing the order form 

PHP... at a glance 

Writing the callback function 

Introducing JavaScript^ substringO function 

The final test drive (right?) 

We need two request objects! 

Creating two request objects 
Welcome to the world of asynchrony! 
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Web Page Forestry 

Wanted: easy-to-update web pages. 

It’s time to take things into your own hands, and start writing code that updates your 
web pages on the fly. Using the Document Object Model, your pages can take on 
new life, respond to users’ actions, and help you ditch unnecessary page reloads 
forever. By the time you’re done with this chapter, you’ll be able to add, remove, and 
update content virtually anywhere on your web page. So turn the page, and let’s 
take a stroll through the Webville Tree Farm. 


Need a dynamic application? 203 
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Using the DOM without Ajax 208 
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Write your own... Web Dictionary 215 

Order matters to the web browser 218 
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Some browsers don’t recognize Node 237 

The Great Chapter 4 Coding Challenge 239 
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P^LOP?N<? POH APPLl^aflONS 

A Second Helping 

Hungry for more DOM? 

In the last chapter, you got a crash course in the coolest way to update 
your web pages: the Document Object Model. We figured you might 
be wanting even more, though, so in this chapter you’ll use what 
you’ve just learned to write a nifty DOM-based application. Along the 
way, you’ll pick up some new event handlers, learn how to change a 
node’s style, and create a user-friendly, dynamic application. This is 
the chapter where we take your DOM skills to a whole new level. 
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POST R 鄉 s 

Saying More with POST 

This is what you’ve been waiting for. 

You asked for it, and now you’re going to get it: we’re finally going to ditch 
send(null), and learn how to send more data to a server. It will take a little extra 
work on your part, but by the time you’re finished with this chapter, you’ll be 
saying a lot more than “no data” to the server in your asynchronous requests. So 
fasten your seatbelts, and let’s take a cruise through the land of content types 
and request headers; we’re in POST-country now. 
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yHt 你 外 Kfs aNP Kkponsk 

More Than Words Can Say 

Ever feel like nobody is listening to you? 

Sometimes plain old English just doesn’t cut it when you’re trying to 


communicate. You’ve been using text for all of your requests and responses so 
far, but it’s time to break out of our plain-text shells. In this chapter, we’ll dive 
into XML, and teach our servers to say a lot more than they ever could with 
plain text. As if that’s not enough, you’ll teach your requests XML, too, even 
though that’s not always a good idea (more on that inside). Get ready... once 
you’ve finished this chapter, your requests and responses will never be the same. 
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7 a Fight to the Finish 

It’s time to go back to elementary school. 

Remember the days when differences were resolved with harsh words, flying 
fists, and poor kung fu imitations? Remember when nothing thrilled your soul 
like hearing “Fight!” screamed in the halls of the cafeteria? In this chapter, 
we’re going back to those days, and leaving friendly words and the golden rule 
behind. XML and JSON, two different formats for sending and receiving data 
in your asynchronous requests, are ready to let their differences be settled in the 


squared circle. Get your scorecard ready, and let’s take it to the ring! 
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App^npIV 1 ： EvMas 

A Few Special Bonus Gifts 

Just for you: a parting gift from Head First Labs. 

In fact, you’ll find five special bonus gifts in this appendix. We wish we could 
stick around and tell you about a lot more, but it’s time for you to take what’s 
you’ve learned and head out into the cold, cruel world of web programming 
on your own. We’d hate for you to take off without a little more preparation, 
though, so take a look at the top five things we just couldn’t squeeze into this 
book. 
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App^npIv 2 ： am sno POM 

a2 

f ■( Ifs time for a little bonus credit. 

Within the pages of this appendix, you’ll find some of the utility code that was 
a little advanced for when you ran across it earlier in the book. By now, though, 
you should be ready to tackle these Ajax and DOM utility functions head-on. 
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how to use this book 


Who is this book for ? 

If you can answer “yes” to all of these: 

① Do you know HTML, some CSS, and some JavaScript? (You 
don’t need to be a guru.) 

(5) Do you want to learn, understand, and remember Ajax, with a 
goal of developing more responsive web applications? 

( 3 ) Do you prefer stimulating dinner party conversation 

to dry, dull, academic lectures? 

this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any one of these: 

(T) Are you completely new to HTML or CSS or 

JavaScript? (You don’t need to be advanced, but you 
should definitely have some experience. If not, go 
get a copy of Head First HTML and CSS, today, and 
then come back and get this book.) 


(2) Are you a kick-butt Ajax developer looking for a 
reference book? 


( 3 ^ Are you afraid to try something different? Would you 
rather have a root canal than mix stripes with plaid? 

Do you believe that a technical book can’t be serious if 
browsers are anthropomorphized? 


this book is not for you. 



^ -this book is 

+olr 〜yohc “。亡釙 aUo\rd iiJ 
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We know ivhat youYe thinking. 

“How can this be a serious programming book?” 


“What’s with all the graphics? 
“Can I actually learn it this wa 
“Do I smell pizza?” 
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And we know what your brain is thinking 

Your brain craves novelty. It’s always searching, scanning, waiting for 
something unusual. It was built that way, and it helps you stay alive. 

So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s 簡 /job —— recording things that matter. It doesn’t bother saving 
the boring things; they never make it past the “this is obviously not 
important” filter. 

How does your brain know what’s important? Suppose you’re out for a 
day hike and a tiger jumps in front of you; what happens inside your head 
and body? 

Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows... 

This must be important! Don’t forget it! 

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. 
You’re studying. Getting ready for an exam. Or trying to learn some 
tough technical topic your boss thinks will take a week, ten days at 
the most. 

Just one problem. Your brain’s trying to do you a big favor. It’s 
trying to make sure that this obviously non-important content doesn’t 
clutter up scarce resources. Resources that are better spent storing 
the really big things. Like tigers. Like the danger of fire. Like how 
you should never again snowboard in shorts. 

And there’s no simple way to tell your brain, “Hey brain, thank 
you very much, but no matter how dull this book is, and how little 
I’m registering on the emotional Richter scale right now, I really do 
want you to keep this stuff around.” 





SM 、 M. 


Great. Only 
637 more dull, 
dry, boring pages. 
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how to use this book 


We 


^nkofa “Head ^ reader as a le| 


othina9 First you have to get it, then make sure 
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Metacognition ： thinking about thinking 


If you really want to learn, and you want to learn more quickly and more 
deeply, pay attention to how you pay attention. Think about how you think. 

Learn how you learn. 

Most of us did not take courses on metacognition or learning theory when we 
were growing up. We were expected to learn, but rarely taught to learn. 

But we assume that if you’re holding this book, you want to learn Ajax. 

And you probably don’t want to spend a lot of time. And since you’re 
going to develop applications, you need to remember what you read. And 
for that, you’ve got to understand it. To get the most from this book, or 
any book or learning experience, take responsibility for your brain. Your 
brain on this content. 

The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 

Otherwise, you’re in for a constant battle, with your brain doing its 
best to keep the new content from sticking. 

So just how DO you get your brain to treat Ajax like 
it’s a hungry tiger? 

There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are 
able to learn and remember even the dullest of topics if you keep 

pounding the same thing into your brain. With enough repetition, your brain says, “This 
doesn’t feel important to him, but he keeps looking at the same thing over and over and over, so 
suppose it must be.” 


I wonder how I 
can trick my brain 
into remembering 
this stuff... 



The faster way is to do anything that increases brain activity^ especially different types 
of brain activity. The things on the previous page are a big part of the solution, and they’re all 
things that have been proven to help your brain work in your favor. For example, studies show 
that putting words within the pictures they describe (as opposed to somewhere else in the page, 
like a caption or in the body text) causes your brain to try to makes sense of how the words and 
picture relate, and this causes more neurons to fire. More neurons firing = more chances for your 
brain to get that this is something worth paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they perceive that 
they’re in a conversation, since they’re expected to follow along and hold up their end. The 
amazing thing is, your brain doesn’t necessarily care that the “conversation” is between you and a 
book! On the other hand, if the writing style is formal and dry, your brain perceives it the same 
way you experience being lectured to while sitting in a roomful of passive attendees. No need to 
stay awake. 

But pictures and conversational style are just the beginning. 
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how to use this book 


Here^ tvhat WE 

We used pictures, because your 


did ： 


brain is tuned for visuals, not text. As far as your 
brain’s concerned, a picture really is worth 1,024 words. And when text and pictures 
work together, we embedded the text in the pictures because your brain works more 
effectively when the text is within the thing the text refers to, as opposed to in a caption 
or buried in the text somewhere. 
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your brain. 
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We used concepts and pictures in unexpected ways because your brain is tuned for novelty, and 
we used pictures and ideas with at least some emotional content, because your brain is tuned to 
pay attention to the biochemistry of emotions. That which causes you to feel something is more 
likely to be remembered, even if that feeling is nothing more than a little humor, surprise, or 
interest. 

We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening to a 
presentation. Your brain does this even when you’re reading. 

We included more than 40 activities, because your brain is tuned to learn and remember more 
when you do things than when you read about things. And we made the exercises challenging-yet- 
do-able, because that’s what most people prefer. 



We used multiple learning styles, becausejoz/ might prefer step-by-step procedures, 
while someone else wants to understand the big picture first, and someone else just wants 
to see a code example. But regardless of your own learning preference, everyone benefits 
from seeing the same content represented in multiple ways. 


We include content for both sides of your brain, because the more of your brain 
you engage, the more likely you are to learn and remember, and the longer you can stay 
focused. Since working one side of the brain often means giving the other side a chance to rest 



you can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view ，because 
your brain is tuned to learn more deeply when it’s forced to make evaluations and judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it~you can’t get your body in shape just by watching people at the gym. 
But we did our best to make sure that when you’re working hard, it’s on the right things. That 
you } re not spending one extra dendrite processing a hard-to-understand example, or 
parsing difficult, jargon-laden, or overly terse text. 

We used people. In stories, examples, pictures, etc., because, well, because person. And 

your brain pays more attention to people than it does to things. 

We used an 80/20 approach. We assume that if you’re going for a Ph.D in Ajax, this won’t be 
your only book. So we don’t talk about every thing. Just the stuff you’ll actually need. 


Espresso 
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Here^ ivhat YOU can do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a starting point; listen to 
your brain and figure out what works for you and what doesn’t. Try new things. 


3。 ⑽ ” 


(T) Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

( 2 ) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

Read the ^Frequently Asked Questions ■” 

That means all of them. They’re not optional 
side-bars —— they ’re part of the core content! 

Don’t skip them. 

(4) Don’t do all your reading in one place. 

Stand-up, stretch, move around, change chairs, 
change rooms. It’ll help your brain (and body) feel 
something, and keep your learning from being 
too connected to a particular place. Remember, 
you won’t be taking the exam in your 
bedroom. 

(5) Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing-time, some of what you 
just learned will be lost. 


(§) Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. Beer, or 
something stronger, is called for when you pass 
the exam. 

(7) Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you didn’t know were 
there when you were reading about it. 

( 8 ) Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim the 
surface or forget what you just read, it’s time for a 
break. Once you go past a certain point, you won’t 
learn faster by trying to shove more in, and you 
might even hurt the process. 

(9) Feel something! 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke is 
still better than feeling nothing at all. 
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how to use this book 


Read Me 

This is a learning experience, not a reference book. We deliberately stripped out 
everything that might get in the way of learning whatever it is we’re working on at that 
point in the book. And the first time through, you need to begin at the beginning, because 
the book makes assumptions about what you’ve already seen and learned. 


We assume you are familiar with HTML and CSS. 

It would take an entire book to teach you HTML and CSS (in fact, that’s exactly what 
it took: Head First HTML with CSS & XHTML). We chose to focus this book on Ajax 
programming, rather than rehash lots of markup and style that you could learn about in 
other places. 

We assume you’ve at least seen JavaScript code before. 

It would take an entire book to teach you... oh, wait, we’ve already said that. Seriously, 
JavaScript is a lot more than a simple scripting language, and we aren’t going to cover 
all the ways you can use JavaScript in this book. You’ll learn about all the ways that 
JavaScript is related to Ajax programming, and learn how to use JavaScript extensively to 
add interaction to your web pages and make requests to a server. 

However, if you’ve never written a line of JavaScript, aren’t at all familiar with functions 
or curly braces, or have never programmed in any language before, you might want to 
pick up a good JavaScript book and browse through it. If you want to plow into this book, 
feel free —— but we will be moving fairly quickly over the basics. 

We don’t cover server-side programming in this book. 

It’s now common to find server-side programs written in Java, PHP, Ruby, Python, Perl, 
Ruby on Rails, C#, and a whole lot more. Ajax programming works with all of these 
languages, and we have tried to represent several of them in this book’s examples. 

To keep you focused on learning Ajax, though, we do not spend much time explaining the 
server-side programs used; we’ll show you the server-side code with some notes, but that’s as 
far as we go. We believe that your Ajax applications can be written to work with any kind of 
server-side program; we also believe that you’re smart enough to apply the lessons learned 
from an example that uses PHP to one that uses Ruby on Rails or a Java servlet. 


We encourage you to use more than one browser with this book. 

As much as it sucks, different web browsers handle your HTML, your CSS, and your 
JavaScript in completely different ways. If you want to be a complete Ajax programmer, 
you should always test your asynchronous applications on lots of modern browsers. All the 
examples in this book were tested on recent versions of Firefox, Opera, Safari, Internet 
Explorer, and Mozilla. If you find problems, though, let us know... we promise it’s an accident. 
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We often use tag names for element names. 

Rather than saying “the a element，’’ or “the ‘a’ element,” we use a tag name, like “the 
<a> element.” While this may not be technically correct (because <a> is an opening tag, 
not a full blown element), it does make the text more readable. 


The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you’ve learned. Don y t skip the exercises. 

The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you’ve learned. Most reference books don’t 
have retention and recall as a goal, but this book is about learning, so you’ll see many of 
the concepts come up more than once. 

The examples are as lean as possible. 

Our readers tell us that it’s frustrating to wade through 200 lines of an example looking for 
the two lines they need to understand. Most examples in this book are shown within the 
smallest possible context, so that the part you’re trying to learn is clear and simple. Don’t 
expect all of the examples to be robust, or even complete —— they are written specifically for 
learning, and aren’t always fully functional. 

We’ve placed all the example files on the Web so you can download them. You’ll find them 

at http : //www. headfirstlabs . com/books /hra j ax/. 

The ( Brain Power’ exercises don’t have answers. 

For some of them, there is no right answer, and for others, part of the learning experience 
of the Brain Power activities is for you to decide if and when your answers are right. In 
some of the Brain Power exercises you will find hints to point you in the right direction. 
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the review team 



Tech Reviewers 

I’m so phenomenally lucky to have a 
killer team of reviewers. Johannes de 
Jong probably thinks that he didn’t do 
much, and of course he’d be very, very 
wrong. Johannes started the review, kept it 
running, and made jokes about whiskey at 
all the right times. Pauline McNamara 
manages to be in every Head First (and now 
Head Rush) book, probably because she’s 
such an uber-reviewer. She co-managed the 
review, and was always technically correct 
and yet still “cool.” Go figure! Valentin Crettaz 
found every grammatical mistake I’ve ever made, and 
even kept my diagrams technically accurate. What a 
combination. Kristin Stromberg came to the fray 
late, and just devoured the chapters. Her feedback was 
right on point, and really helped make the book more 
fun, engaging, and enjoyable. You should thank her... 
seriously! Andrew Monkouse made some great Ajax- 
specific comments that really kept me on my Ajax toes. 
Nice work, Andrew! And a special thanks, and shout out, 
to Bear Bibeault. Bear, I know life got in the way, but I 
appreciate your involvement all the same, man! 


de ^ ^ 


I hope you like this book, guys —— this book is yours as much as it is mine. 


\Zaleyrtm Cv-ct'taz. 

■ 如 〜 Mohkhousc 




Eric and Beth Freeman 

It seems like these books end up 
being as much about friendships 
as about writing and teaching. If 
it weren’t for Beth Freeman and 
Eric Freeman, my life wouldn’t 
be as rich as it is. They brought me 
into the Head First family, trusted 
me, and taught me (about strange 
faux meat as well as ferries and crazy 
stories). Beth wrote Chapter 3, and 
Eric worked on the cover and a lot of 
the new Head Rush elements. Guys, 
more than your help, I really value 
your friendship. See ya soon. 


XXX 






















































And there’s a lot more..* 


At O’Reilly: 

Mike Hendrickson has managed to be the guy who kept this project going, through every conceivable obstable. 
Mike, this book wouldn’t have happened without you. You’ve seen me through 
some ragged times, and I’m sure there are more coming. Good to know you’ll be 
there for me when things get tense. 

Sometimes you know that a chapter is almost right, but there’s some nagging 
detail that is missing. Those are the times when I turn to my editor, Mike 
Loukides; he always sees to know just what’s missing. This is our fourth book 
together, and we’re already planning the fifth and sixth. 

My heartfelt thanks go out to my team of O’Reilly co-conspirators: Greg 

lorrin led the way on marketing, and in particular 
icked butt the last week of writing. Ellie Volkhausen did that 

irst cover design so long ago, and Mike Kohnke and Karen Montgomery took the cover 
to another level for Head Rush. Thanks to Colleen Gorman for doing another amazing 
:opyedit ― you just keeping doing these Head First books, and I love that. Sue Willing, Ron 
iilodeau ， and Marlowe Shaeffer took care of making sure the printer was happy, and 
that’s no small task. 




_ 


t’s really no accident that the name “O’Reilly” is on the cover. Tim O’Reilly took a 
: hance, and keeps taking chances, on this series. Tim, you’ll never know how honored I am 
to be a part of this series. 
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Kathy Sierra and Bert Bates: 

You simple can’t do one of these books 
without spending serious time talking to 
Kathy Sierra and Bert Bates, the 

geniuses who created the Head First series. 
Bert and Kathy both did hard time the last 
Iweek of this project, staying up late chatting 
(with me on how to make each page just that 
ittle bit better. The book wouldn’t be the same 
ithout you guys, and your friendship is worth 
yen more than that! 


Sicv-va 


The large number of acknowledgments is because we’re testing the theory 
that everyone mentioned in a book acknowledgment will buy at least one copy, 
probably more, what with relatives and everything. If you’d like to be in the 
acknowledgment of our next book, and you have a large family, write to us. 
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Put a new shine on your web applications. Tired of 

clunky web interfaces and waiting around for a page to reload? Well, it’s 
about time to give your web apps that pine-scented desktop application 
feel. What are we talking about? Just the newest thing to hit the Web: 
Ajax— asynchronous JavaScript and XML—and your ticket to building 
rich Internet applications that are more interactive, responsive, and easy 
to use. So, grab your trial-size Ajax, included with every copy of Head 
Rush Ajax: we’re about to put some polish on your web apps. 


welcome to the next level 
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traditional web apps 


The Web, Ke 

Are your customers tired of waiting around when they place an order on your 
site? Are you getting complaints that every time a button is pushed, the page 
reloads? Then it’s time to get with the program, and take your programming to 
the next level. Welcome to the next generation of web apps, where JavaScript, 
some dynamic HTML, and a little bit of XML can make your applications feel 
like dynamic, responsive desktop apps. 
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Let’s take a look at the kind of applications you (and your customers) are used to: 


The old way (think 1999) 
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Chapter 1 

































































next generation applications 


Welcome to the new millenium/ 

Anybody can program using the same old request/response 
model. But if you want faster apps that feel like you’re 
working on a desktop, you need something new~you need 
Ajax, a completely different approach to web programming: 


No more waiting around. 
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asynchronous applications 




Ajax apps are asynchronous, too 

If you haven’t guessed by now, we’re talking 
about how you can use Ajax to build killer 
web apps. So far, you’ve seen how Ajax 
applications can talk to a web server without 
the browser reloading and redrawing the 
entire page all the time. But there’s a lot more 
to Ajax than improved user interfaces. 

On top of ditching those annoying page 
reloads, the JavaScript in an Ajax application 
talks to the web server asynchronously. In other 
words, the JavaScript makes a request to the 
server, but you can still type in web forms, and 
even click buttons —— all while the web server is 


still working in the background. Then, when 
the server’s done, your code can update just 
the part of the page that’s changed, ^utyou^re 
never waiting around. That’s the power of 

asynchronous requests! Combine that 
with updating pages without reloading 
them, and you’ve got Ajax applications. 

Dor /七 wo\r\ry i-f you didh’i 
yi all this; wc II talk a lot 
dbou't dsyh^K\rohous 
fVojirammihj ih iKc domihj 



4 


Chapter 1 









next generation applications 


OK, I'm confused. So now we're 
not using a request/response model? 

AI Actually, your pages are still making 
requests and getting responses. You’re 
just using a different approach in how 
you make those requests and handle the 
responses—now you use JavaScript to 
make the actual request, instead of just 
submitting a web form. 

LI: Why not just submit the form 
normally? What does using Ajax really 
do for us? 

A: The JavaScript code in an Ajax 
application sends your requests to be 
processed by the server, but doesn't wait 
for an answer. Even better, JavaScript 
can also work with the server’s response, 
instead of reloading the entire page when 
the server is finished with your request. 



fRGOUGNTUzl ASKED 

j£STIONS 


UI So how does the page ever get 
back a response? 


A 


That’s where the asynchronous part 
of Ajax comes in. When the server sends 
back a response, JavaScript can update a 
page with new values, change an image, 
or even take the user to a whole new 
web page. And the user never has to wait 
around while all this is going on. 

v I Sol should use Ajax for all of my 
requests? 


But, you’ll use Ajax for most of your 
dynamic page processing, like changing 
images, updating fields, and responding 
to users. If you only need to update part of 
a page, then Ajax is the way to go. 


You said something about XML? 


A 


There are still plenty of times 
when you’ll want to use traditional web 
programming. For instance, when a form 
is totally filled out, you can let the user 
click a Submit button, and then send the 
entire form to your web server, without 
using Ajax. 


0： 

A: Sometimes, your JavaScript will 
use XML to talk back and forth with the 
server. But you don’t always need to use 
XML for your requests. Well spend a lot 
more time looking at when and how you’ll 
use XML in later chapters. 


Ql And AJAX is just an acronym for 
Asynchronous JavaScript and XML? 


A 




Actually, it’s "Ajax”, and it’s not an 
acronym. Although it sort of looks like 
one... and it does fit... hmmm. Well, don’t 
ask us, we didn’t come up with the term! 


Jesse Jdmes >wKo dame up y/itK 

七 lie tcv-m ) said lie didn’t mean 

-fov it *to be an advony 州 • -fijuve/ 


Umm, excuse me... if youre done with all 
this theory, I think I could use some of 
that Ajax over here. 
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boards 


us 


sy\o>wboavd 




Now that rm selling my custom snowboards 
online, I put together a web form that 
keeps up with my sales. But every time I 
want an update, the whole screen reloads. 
You think all this Ajax stuff can help? 





fWe’s ihc dwrwfe, hOh-Ajax vc^sioh 

o( ^ ，s ^ 讪以 is just a web 
tliat subry»i"ts \rc^ucs-fes {p d PUP sdhp-fe. 


Boards n R' Us 


◦ 


fit O fCBQ 




Boards V R' Us :: Custom Boards Report 


Snowboards Sold 

1012 

What I 關 'em For 

$249.95 

What it Costs Me 

$S4,22 




Cash for the Slopes: $167718.76 

Show Me the Money 



0) Find: 

(Q. 

(§) Find Next 

㊁ Find Previous 

^*1 

Done 






PHP 七 

looks u\> V\o>w 
mdv^Y boav-ds 
V\dve bccv\ sold- 


Thch ^ PWP sdHp-t 
Sclls ^ bo^ds 

ou“ ow _ 杜 

—Ws 喊 
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next generation applications 


Reloads? We don’t need no stinking reloads.” 

There’s nothing more annoying than an application that redraws the whole 
page everytime you push a button or type in a value. In Katie’s report, only a 
few numbers are changing, but the entire page has to be redrawn. 

First, let’s figure out why all that reloading is going on... 




lovdilTUi 


o 


^ 令 ft n ， © 

Boards "ft 1 Us ss Custom Hoards Report 


Swwt»«Fdi Sokl 

IU2 

Wtut 3 Sell 'em hir 


SHhmt rtdHfef He 

%A^.22 


心七 ie dlidks -this 
bu-t-fco^ yt 
u pda*tcd -fco-fcals. 


far the 

y# Chi 





TKc scwcv yb a 

vc«yucs*b -fov* *bV\c 灼 uw»bcv 
of bodvds sold... 


equest Updated 
Board Sales 


Q 


■一 乌 




I ■K-l" 


HTML 

Response 


个 Si* ， O (Eh] 

Baards 'W :i Custom Bloants 


^at»c t\\tVs 
七 he button - 
aja'm, to see 

»*f a^y moV " c 

bodv'ds V\avc 
beev\ sold- 



Lan 

WNEI -4m P*f 

獄氣 K 

WhiC H: IGcrila P4* 

«H J3- 




… dhd sends badk 
"the of 
boards sold, alohj 
i 仏 the updated 
wrapped up 
a domplc-tcly hew 
HT/VJL pay. 


C.iJhfiH 1 




丁 he b\rowsc\r loads ihe 
pay tKa-fe -tKc scv-vcv- 

兄 hds badk, a^d shows ii 
Of\ the sd^cch. 


1- "Ql 


tequest Updated 
Board Sales 




eoo 


Boards 'R' Us CD 


。企 

«hf O ((G10 〉， 

BoardsJA 


LXustom Boards Report 

— k/v 


^11 tW»s just SO a 
double y\ur»\bcv-s 
Aa 呼 … 


Snowboards Sold 

C1140 

What I Sell 'em For 

$ 249.95 

What it Costs Me 

$ 84.22 


Cash for the Slopes:^190423.77 

jShow Me the Moneyl | 



HTML 

Response 


— 



' w ' Find Next '^) Find Previous 


Done 




Move v-cloadmj... cvevy time 
you v /扣七 bo3vd sslcs 
-toials, you joita suWcv 
iKv-oujK a pay v-doad- 
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ditching page reloads 


Ajax to the rescue 

Do you see what the problem is? Every time Katie wants to find out the 
latest number of boards sold, the entire screen is redrawn, and she’s left 
with the Internet version of snow blindness. 


DidiVt you say that Ajax will let 
me update the screen without all 
that reloading? Something about 
updating just part of the page? 


Use Ajax to fix the web report... 

Let’s change Katie’s report to use Ajax to send the request 
for updated board sales. Then we can get the response from 
the server, and update the web page using JavaScript and 
dynamic HTML. No more page reloading, and Katie will be 
a happy snowboarder again. 




sdovc 3 
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next generation applications 


Work It Through 


YouVe going to heed a couple of JavaScript functions to turn Katie's report 
mto ah Ajax-powered app. Pelow are the names of three JavaScript 
fuhctiohs. Praw a lihe cowwecfiwg each function wame to what you think 
it will do ihthe final version of the boards app. 


^C*tBo3\rds£oldO 


u^daicPa^cO 


dvea 七 eRe'ues 七 0 


Cvca 七 c a y>cv/ object -for 
■talkm^ bo *tV>c web server. 


/\sk *tKc server -(*o\r {\\t la 七 cs 七 
/boav-d sales -fi^u\rcs. 


sr>o>wi 


Sc*t y>urwbcv o-f boards sold 
ay>a iv^c 6asV> 从 at ^at»cs ^adc 

-to mos-t 6uvvcy>-t values. 





CO9 杳 J § sew^suv A 


yoi/Ve on your way ► 


9 





a plan for katie’s report 


Keworkmg the Boards 絮 ’ Us report 

Let’s use Ajax to revamp Katie’s web report. With Ajax, we can get rid of all those 
page reloads, and cut down on how much data the server has to send to the report. 
Here’s what you’re going to do in the rest of this chapter: 

o Create a new object to make requests to the server 

First, you’ll need a JavaScript function to create an object that 
will let you make requests to the server, and get a response back. 

Let’s call this new function createRequest (). 


Hcv-cs ttc 
tu\rVC>r»*b 

HTML ^ 
七 he Boav-ds 
^ Us 



/ou II add -tKis 

ih-fco -feKc head 
of you\r HT/VIL. 


dv-catcRc<\ucsiO 
y/ill a now 

vc<\ucs-t objcdt 


o Write a JavaScript function to request new board sales totals 

Next, you’ll use the object you just created in Step 1 to make 
a request to the web server. We can put this code in another 
function, called getBoardsSold (), and run it when Katie 
clicks the “Show Me the Money” button. 

ytBoav-dsSoldO vnll 
i\st^ ask tV>c scwcv ^ov 

0 O O Boards 'R* Us CD ^(jiatcd bodvd Salts. 


Me 

i\\t Mo 的 c/ 

stav-b a 
vc^cst- 






tj^ © ht ▼ (； .(◎▼) 


Boards 'R' Us :: Custom Boards Report 


Snowboards Sold 

1106 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 


Cash for the Slopes: $183297.38 

jShow Me the Monevi 


O Find: 

1 ^9 Find Next 

: ind Previous 


Done 







Request Total 
Boards Sold 


TWls is same 

the 

3o i ih ihc 

,-Ajax 叱一 .” 


*tKat 

hO>W SCWCV 

doesn't need 

*bo SCir\di bd£>k d 

buy\d.ii o-f HTML. 


^r 


Wt\\ use *tV>c v-c<\ucs-t objeti dv-caicd 
•m Sicp I {p sc^d 七 his ve'uest. 
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next generation applications 


Q Update Katie’s report with new numbers using JavaScript 

Now you can update the report with the current number of boards sold, and 
figure out how much cash Katie’s made. Let’s take care of this another new 
JavaScript function that we’ll write; we’ll call this function update Page (). 


-the 

sev-veir ish ； i 
domg a^y 
^aldula-tions. 




? 





don’t understand everything that’s going 
on... especially with the actual request. We’re going to cover 
all of this in detail in this book. For now, just get an idea of the 
basics of how an Ajax application works. Pay careful attention 
to how the web page uses JavaScript to make a request, and 
how the server only returns a single number, and not HTML. 
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chapter 1 highlights ^t\\ io tod\^ i h a 

R " si lci，s ^ ^ d c W... 

「 Us highlisht ^qqI: Chapter I - 


pages 



So you’re probably thinking, “What’s a highlight reel doing at the beginning of the chapter? 
That’s not normal.” You’re right... but this is Head Rush, remember? Before you go 
any further, stop and read each of these highlights out loud. 


Then, go on to the next page, and get ready to load these concepts into your brain. We’ll 
work through each of these in detail throughout this chapter. 


Asynckronous applications make requests using a 
」 JavaScript object, anct not a form submit. 



Your requests and responses are kandlect hy tke weL 
browser, not ctirectly hy your JavaScript cocte. 



Once tke wel> browser gets a response to your 
asynckronous request, it will ” call back” your 
JavaScript witk tke servers response. 


«aa ^ OUT LOUP. - 以 :: 
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next generation applications 


HTML RefpesLef 

Feeling a little rusty on your <div>s and <span^W/Ve’re going to dive into 
some HTML on the next page, so before we do, here’s a quick refresher 
course on two of the coolest HTML elements you’ll ever run across. 


600 


<div> 


<div id= A, menu^ >home < / a> 

<a href="hoi^. , „ >wr iting< / a> 

<a href ="books . ^ , >resour ces</ a>l 

href="li nks . html 

^ ^ f= ^lib.html->library</a> ； 

</div> 


elements with one CSS rule., 

<dw> at OY.C ^7 

Use a <d'»v> bo jv-oup -tojct^cv* 
clcmC>r»*ts 3 simiUv* ^uv^osc- _ 


library 


〈 span: 


<spar»> clcmch-ts 
sc "t ic^i, bu-fe 
dor/i s-tav-t 灼 cw 
pavajv-aphs oy blodks. 


<ul> 


g LSS ^ and se t off text easily. 


<liXspan cl ass= " cd " 

<s Pan class=-artist->?f la Bar</s P 助〉， 


^^^'EcaTcwblodko^ 

'Lc'X'i, bu*t s£i|| by 
々 led with C££. 



What's playing at the Lounge 

We Te frequently asked about the music we play at the lou. 
we keep a list here on the site, updated weekly. Enjoy. 

Buddha Bar, Claude Challe 

When It Falls, Zero 7 
Earth 7, L.T.3. Bukem 

Le Roi Est Mort, Vive Le Roil, Enigma 

Music for Airports, Brian Eno 
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boards V' us html 


Kevtewmg the Boards Us HTML 

First things first... Katie already has a web page, so let’s take a look at it. Then 
you can begin to add in all the JavaScript code we’ve been talking about. 

Here’s what Katie’s page looks like so far: 



^at»cs vead P • 的七 ” 

HT 亂 CS £ 彳）^ 丁象' 

<html> 

<head> 

<title>Boards Us</title> 

<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href=”boards•css” / > 


so sKcs all OVCV- *tw»s stud. 

/ V 


</head> 

<sdH P t> iay 

<body> 

<hl>Boards 'R/ Us Sales Report</hl> 

<div id= 〃 boards〃> 

<table> 

<tr><th>Snowboards Sold</th> 



s lyksheci 




Weve’s 七 he 
sales -fijuire 



update. 


<td><span id="boards-sold’’>1012</span></td></tr> ou 丨匕 

<tr><th>What 工 Sell 'em For</th> 

<td>$<span id=’’price’’>24 9.95</spanx/td></tr> 
<tr><th>What it Costs Me</th> 


<td>$<span id=’’cost’’>84.22</spanx/td></tr> 
</table> 

<h2>Cash for the Slopes : - - 

$<span id= 〃 cash 〃 >167718.76</spanX/h2> 


...a 灼 d 七 V>cn y ou ⑽ 
^i^uve out a 灼 - 
从七 fV-o-fit, "too. 


<form method= 〃 GET 〃 action= 〃 getUpdatedBoardSales.php〃> 

<input value=〃Show Me the Money 〃 type = ,r submit ,r /> 


</form> 
</div> 
</body> 
</html> 



tha 七 bu-tu ^i ic pusKcs 
k updated Uak Ri 5 hi ^ 
••七 sub ^i-ts -the bu-t youVc 
9 oih 9 ^ tha-t sooh. 
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used o, 

V, C y <s，> W so 士“』 

sbj\t m d 


<span id= 1 "boavds - sold">lOl2*</span> 


0 o o 

Boarik^R 1 Us CD 



© ht ▼ 



Boards f R v 1 

Us :: Custon 

^Boards Report 


Snowboards 5oEd 

1012 

What I Sen 'em For 

$249,95 

What it Costs Me 

$84.22 


Cash for the Slopes: $167718-76 

Show Me the Money 



wc 灼 use 

"those j^s ih ouv" 
Java£^\rip-t -to updaic 

K>Uhr»bc\rs ih 

■fe^ese <spaK»>s. 


Q Feii± 



puid Next Find Previous 

Jf 

Done / 

A 





It’s time to take some action. Download the examples for the book at 

http : //www. headfirstlabs . com, and find the chapter01 /boards / folder. Open 
up the boards . html file in your web browser. It should look just like Katie’s page above. 
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creating a javascript request object 


Step 4 ： Creating a request object 

Let’s get back to updating Katie’s web report. First up, you need a function that creates 
a new object to make requests to the server. This turns out to be a bit tricky, because 
different browsers have different ways of creating this object. To help you out, we’ve 
written some “pre-assembled” JavaScript for you. Whenever you see the logo, 

it means you’ll have to take some code on faith, like this code below that creates an object 
to make requests to the server. Trust us though — you’ll learn all about this code in more 
detail in the chapters to come. For now, just type it in and see what it can do. 

var request = null; ^ - a variable bo Kold iKc revest objedt- 

function createRequest() { 

try 丨 、丁 Wis Ue bc\ts -bo tveate a ^ 

request = new XMLHttpRequest (); 代 ' 奶七 ♦ 七， 

} catch (trymicrosoft) { 、 

This is 仏 dype o<P 

try { object 

request = new ActiveXObject ( 、 'Msxml2 • XMLHTTP"); 

} catch (othermicrosof t) { -two Imcs -tvy and tKc 

七 { 七 object ioo, but ir» a way iUai 

request 

catch (failed) { 
request = null;^ 

vecyuest still ^11- ^ 

is, 別⑶七 

•m 七 … 


createRequest() 

getBoardsSold() 

updatePage() 





th,s todt i, 

'^?lcs folder 


c 



wo\rks or» |h-tc\rhrt E>cploVCV. 
new ActiveXObject (''Microsoft • XMLHTTP") 


|*f somciiimj 50 CS v/Vo^J, 七 iiis makes suve 
i\y t ve'uest variable is still sti -to yvull. 


… 如 d we dan spii out 如 cv-v-o^. 

/ mcssa 9 c wi-th JavaSd^ipt 

-Puhd-tioh. 


s 


if (request == null) 

alert (''Error creating request object! r, ); 

JavaS 邮 H 


...W you should 
㈣ y "type "this 
亡 ode ih you\rsel-f. 
I"t wijj help youv* 
一 ih 3 d: used 
ahC ( 

仏 ihkihg aboui 

Ajax apps. 
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Go ahead and add this code into the <head> element of your 
HTML in boards.html. Don’t forget you’ll need to add the 
<script> and </script> tags, too. 


<head> 

<title>Boards Us</title> 

<link rel=”stylesheet 〃 type= 〃 text/css 〃 href= 〃 boards•css” / > 


<script language^"javascript" type="text/javascript"> 


</script> 
</head> 



All iKat p\rc-asscr»»blcd 

JavaSdvip-t joes ih Kcvc. 


TKcsc -tell bvov/sev 七 ha 七 
youVc dddi^5 somC sfiriptnr^, a>r»d 
七 ha 七 youVc us'mj JavaStvi^*t as 
七 he scri^bn^ la^juay. 


Ul Am I supposed to understand 
exactly what that code does yet? 


Ql Is the request object called 
“XMLHttpRequest” or “ActiveXObject”? 



fRGOUGNTUil ASKED 

ESTIONS 


Al No, you don’t need to understand 
all of this code yet. For now, just get 
a general idea of how this looks; well 
explain it in detail in Chapter 2. 

LI : What is null? I saw that in the 
pre-assembled JavaScript, and wasn’t 
sure what that means. 

Al null is a special value, and 
actually means an empty value, or a non¬ 
existent reference. In other words, it's sort 
of like an aniti-value. But don’t confuse 
null with “0” or "false"—those both are 
non-empty values, and aren’t the same as 
a null value. 


n: It could be either. Well talk a lot 
more about this in the next chapter, but 
the short answer is that you have to use 
different object names for different types of 
web browsers. 


W. So do my users have to use a 
certain browser to use my Ajax apps? 

Al No, as long as your users have 
JavaScript enabled in their web browser, 
this code should work without any 
problems.So your Ajax apps will run just 
fine on Firefox, Mozilla, Internet Explorer, 
Safari, Netscape, and Opera. 


LI: What if someone has JavaScript 
disabled in their browser? 

Al Unfortunately, Ajax applications 
require JavaScript to run. So users who 
have JavaScript disabled aren’t going to 
be able to use your Ajax applications. 

JavaScript is usually enabled in browsers 
by default, so anyone who has disabled 
JavaScript probably knows what they're 
doing, and could turn it back on if they 
wanted to use your Ajax app. 
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sending a request with javascript 


Step 2 ： Requesting updated sales 

Now that you can get a request object with createRequest (), you’re ready for the 
next step: writing the getBoardsSold () JavaScript function. This function will use the 
new object to request the total number of boards sold from the server. Let’s figure out what 
this function needs to do, and then we can get back to coding Katie’s app. Remember our 
diagram? Here’s the step we’re working on: 


createRequest() 

getBoardsSold() 

ui 

pdatePage() 





ft» 




Boards 'R' Us :: Custom Boards Report 


vmfeEi i 


Lin 


S> 9 ihp; fit 扣奸 ， » 


var request. . . ■ 

function 
getBoardsSold( 

l 

</script> 




Request Total 
Boards Sold 


— 


o iuu： 


Here’s what you’ll need to do to make getBoardsSold () work: 



® Create a new request object by calling 
the createRequest() function. 

(b) Figure out what URL you need to 
connect to so you can get updated 
board sales. 


(c) Set up the request object to make a 
connection. 


④ Request an updated number of 
boards sold. 


Po It 


You use |>\rc-asscnf»blcci 
JavaSdv-i^*t -Pv-om 七 he last *bwo 
pages *to -take o-f 七 his. 

^a*tic alv^adh/ has Ais URL m Kcv 

so iKis should be simple 




s wKcirc you’ll use 
仏 at objed-t you 

⑽七 cd m ^caicRc^ucsia 


u use 七 Wis y\umbcv 

la-tcv, rn V ou 

u^da-tc ttc \>ay ^ ^ 
values. You’ll -tatklc tWis m 

just a I'iHIc 


Open up your boards . html file, and add a new Java Script function called getBoardsSold (), 
right after createRequest (). Then, see if you can add a line of JavaScript in 
getBoardsSold () to create a new request object (that’s Step “a” from above). If you’re stuck, 
check the answers in the back of this chapter, on page 61 . 

Be sure and make these changes to your copy of boards . html before you go to the next page. 
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next generation applications 


Adding the getBoardsSoldO -Function 

If you did the exercise on the previous page, you should have some 


code in your boards . html page that looks something like this: 




<script language= 〃 javascript 〃 
var request = null; 


type=’’text/j avascript’’> 


Rcwcw'bcv ； 3ll 
JavaScript todt is 

a 灼 d </stvift> tay. 


TK"»s »s youv 
ve'ues 七 
variable ； o\tt 


youv to&t tails 
tvea 七 eRe'ues 七 0, 
七 Wis vav'iablc Will 
^>onr\*b *to 3 V'Cv/ 
vc<\ucs*b objed • 七， 



function createRequest() { 

// pre-assembled JavaScript 


l+c 代、 ^eaicRe<\uesi(), wKidK you 

sKould Kavc added a *fcw pajes back. 


function 


getBoardsSold() 



createRequest(); 


TVlS is 七 ir»C>W 
Java£dv-ip*t 七 ioh … 


</script> 



' hcir ^ whc^c ike , 

ob' )CC l k ,. thC 

」 ,s usi h a ihc 


Sending the request to the ri£|ht URL 

So what’s next? You’ve got an object that you can use to request the 
board sales from the server, but how do you make that request? First, 
you need to tell the object where to send the request —— in other words, it 
needs to know what program on Katie’s server to send the request to. So 
you need to tell it the URL of the script running on the web server. 

一 —-u— 

<form method= 〃 GET 〃 action =, 'ge tUpdatedBoardSales 
〈input value=〃Show Me the Money” type= 〃 submit 〃 / > 
</form> 


^ati^s v/cb HTML- 


ttcv-cs ttc <-fo\rm> fav-b o-f 


But doesn’t the PHP script return a 
bunch of HTML right now? I thought 
we only wanted the number of boards 
sold for the Ajax version of the app. 
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PHP — 



This is bonus d.vcdi*t -fov "t^osc o( you v/Ko 3vc nrrto PttP- 
|-f you don’ 七 kho>w PttP, it’s d. jus 七 iakc a <\uitk look, 
a^d keep 3 0 … 3. V® 01 do〆 七 i^ccd *to u^dev-s-ta^d 七 liis sdrip 七 

•to leav-h Aja 乂 ov -follow iKe ocam^lcs m -tKc book. 


Here’s a quick look at the PHP that Katie’s using for her Boards app. 
Remember, we’re not going to explain how this all works... but here’s what’s 
going on when a request is made for updated board sales. 


<?php 


// Connect to database 

$conn = @mysql 一 connect (''mysql. headfirstlabs . com ”， 

、 'secret 〃，、 'really-secret 〃 



if (!$conn) 


Thc f，}rsi P^-t of s , Hpi 

^ akcs a io 

B 。扣 w & database. 


die (''Error connecting to MySQL : . mysql error ()); 


if (!mysql 一 select—db (''headfirst" , $conn)) 

die (''Error selecting Head First database : . mysql error ()); 


$select = 'SELECT boardsSold f ; 

$from = ' FROM boardsrus'; 

$queryResuit = @mysql 一 query($select . $from); 
if (!$queryResult) 

die('Error retrieving total boards sold from database 


while ($row = mysql fetch array($queryResuit)) { 


$totalSold = $row['boardsSold^]; 

} 

$price = 249.95; ^ 

$cost = 84.22; - -"" 一 


|-f you v/3y\*tcd ； you 
^ouldi s-bov-c values 

•m i\\t database, W 



TWis "tVic 

s6v'i\>t v^dlcs 

latest 

sales -to-tals 



七 he database. 


$cashPerBoard = $price - $cost; ^^ 

$cash = $totalSold * $cashPerBoard; <r TKc ^ 

° h is 

mysql 一 close ($conn) ; ou-t Kcv c . 


?> 

<html> 

<head> <title>Boards y R r Us</title> 
<link re1=^stylesheet^ type= 〃 text/css 
</head> 


href= 


H'CV'C tomCS dll 七 ha 七 
HTML >NC VC bcorv 



<body> 

<hl>Boards 'R/ Us :: Custom Boards Report</hl> 
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next generation applications 


<div id= 〃 boards〃> 

<table> 

<tr><th>Snowboards Sold</th> 
<td><span id= 〃 boards-sold〃> 

<?php 

print $totalSold; 

?> 

</spanx/td></tr> 

<tr><th>What I Sell 'em For</th> 
<td>$<span id=’’price’’> 

<?php 

print $price; 

?> 

</spanx/td></tr> 

<tr><th>What it Costs Me</th> 
<td>$<span id =,, cost^> 

<?php 

print $cost; 

?> 

</spanx/td></tr> 

</table> 

<h2>Cash for the Slopes : 

$<span id=’’cash’’> 

<?php 

print $cash; - 

?> 



Tk PHP outputs i\^t 

values jot -fv-om 
HTML ^fov- vc\>ovt 


loh 

HT 槪 ou-tpu-t by 

ihc W 



</span></h2> 


<form method= 〃 GET 〃 action= 〃 getUpdatedBoardSales•php〃> 
<input value=〃Show Me the Money” type= 〃 submit 〃 / > 

</form> 


</div> 
</body> 
</html> 


• • WHa 子你 (Me?. 

All this code does is looklap how many boards have been sold, figure out 
the total cash Katie’s made, and then return an HTML form with the 
updated totals sales and cash figures. 
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It’s also OK if you don’t know PHP, or haven’t worked with databases 
# before. In just a few pages, we’ll give you a version of the script that runs 




without a database, so you can run Katie’s web report for yourself. 
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servers that return lots of htmI 


createRequest() 


getBoardsSold() u datePage() 


What the server used to do. 



Remember how the non-Ajax version of Katie’s report works? Every time a request 
is made to the PHP script, it has to return the number of boards sold, along with an 
entirely new HTML page. Flip back a page, and notice that over half the PHP script is 
just HTML! Here’s another look at what’s going on: 




Iwdf ITUi O 



雄* € ， O i:Q 


Us t 

s Custom Boards Report 


^ URL ^ 
^ vveb 4 


om 


SwwtH4lR]l i«kl 

IMS 

Wlwt 1 Sell mm Fflr 

_a«.M 

WMt m 

%A^.22 


Cas 4 i for the Slopes: 

Shdw Ui< Rhi hfef>#Y 


IBd 







All tKc HT ML tKat 

七 he scv-vcv- Kas -to 

-(•OV VC^UCS't- 






<html> 

<head> 

<title>Boards y R r Us</title> , 

<link rel= " styleshee t" type=-text/css- href=^boards.css 

</head> 




Katies sewev, 

"fco deal 
七 

盯 ML 6 ovvb&rvt 


Custom Boards Report</hl> 


<body> 

<hl>Boards 、 R’ Us 

<div id="boards"> 

<table> 

<tr> 〈 th>Snowboards Sold 〈 /th> ^ — 

<td><span id=-boards-sold->1149</span></td></tr> 

<tr><th>What I Sell 'em For</th> 

<tcL>$<span id=»price">249. 95</span></td></tr> 

<tr><th>What it Costs Me</th> 

<td>$<span id =" cos t"> 84 . 22 </span></td></tr> 

</table> 

<h2>Cash for the Slopes : — 

$<span id="cash»>190423.27</span></h2> 

〈form method="GET" a ction="getUpdatedBoardSales.p p > 

〈input value="Show Me the Money" type="submit 〃 /> 

</form> 

</div> 

</body> 

</html> 



All HT/^IL, a^d -the 
° hl y 妞吮诎鈍 dhdhjed is 
the hUr^bcir o( boavds sold ； 
the updated dash io^l 
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next generation applications 


What the server should do now 

When you’re writing Ajax apps, the server doesn’t need to send all that 
HTML back in its response. Since you’ll use JavaScript to update the web 
page, all you need from the server is the raw data. In Katie’s app, that 
means that all we want is the number of boards sold. Then, you can figure 
out the cash that Katie has made with some simple JavaScript. 


A 匕 h happier 

stmess 一 scv-vc^. 


getUpdatedBoardSales-ajax.php 

c + 

TV^c URL. \p tV'C 

oUk 



MCci\OTi 


scv-vcv docs〆 七 
Kavc ncavly as mutK 
七 io 的七 o send 
badk \x> Kcv- y/cb -fovm. 



The tota' 

oJf boards sold- 



Thafs all the server sends back now? ril 
bet my report will run faster with Ajax! 
I’ll have my PHP guy take care of changing 
the server-side script right away. 



you're on your way 


23 










changing the php script for ajax 


SC^OY\d 


PHP^W 


Katie’s PHP script got a lot simpler when all it needed to do was 
return the total number of boards sold. Take a look: 

<?php 

// Connect to database 

$conn = @mysql 一 connect (''mysql • headfirstlabs • corn', 

''secret’’ ， ''really-secret ’’）； 

if (!$conn) 

die (''Error connecting to MySQL : . mysql error ()) 






ALosi 〜味 3 
f ihc is 

hc 3s ihc 
old v ^sio h . 


if (!mysql 一 select_db (''headfirst’’ ， $conn)) 
die (''Error selecting Head First database : 


\\ 


.mysql error()); 


$select = 'SELECT boardsSold A ; 

$from = ' FROM boardsrus A ; 

$queryResult = @mysql—query($select . $from); 
if (!$queryResult) 

die ( 'Error retrieving total boards sold from database . r ); 

while ($row = mysql fetch—array($queryResult)) { 

$totalSold = $row['boardsSold A ]; 

} 


echo $totalSold; 


mysql close($conn) 


?> 


Kon,, mstod o( a WA 

oJp HTML., s6v«\>-t yst 

o( boavds sold- 




来 Notice 七 ha 七七 he todc 
-figuv'mg out the dasK 
^atic made wch 七 away- Vouv 
Java£dvip*t will -take davc o-f 
tiiosc daldula'tiohs y\ovj. 
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next generation applications 



datePage() 



It’s time to give Katie’s PHP script an Ajax upgrade. Open up the examples, and find 
getUpdatedBoardSales-a jax. php in the chapter01 /boards / directory. This is a 
version of getUpdatedBoardSales . php that only returns the number of boards sold, without 
any HTML in the response. It also works without a database, so you don’t need to set one up to use 
this PHP script. Make sure this file is in the same directory as your boards . html file; we’ll be 
using this new version of the script in just a moment. 


The new script’s UKL 

Now that you’ve got a PHP script that only returns the number of boards 
sold, instead of a bunch of HTML, we just need to make a request to that 
script. Remember, you want to send your request to the new version of the 
PHP script, and only returns the sales total, not an entire HTML page. 

Store the URL of this new PHP script in a JavaScript variable, like this: 



ttevVs youv- 




TKis -takes davc o-f dvcatmj 

function qetBoardsSold () { l. , 丄 

^ - tnc r»c>w request objedt- 

createRequest(); 1 ^ 一 

var url = ''getUpdatedBoardSales-ajax.php"; 



TWis is the URL of b c Ajax- 
veady vcvsioh of the PHP sdvipt 


you 1 re on your way ► 
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telling javascript what url to connect to 


createRequest() 


Initializing the connection 

You’ve got a request object, and a variable with the URL to connect to. 
Now you just need to tell the request object how to connect to the server, 
and give it that URL as the address to connect to. Here’s how you do that: 


function getBoardsSold() { 

createRequest(); 

var url = ''getUpdatedBoardSales-ajax.php 



n 


request, open (''GET" , url, true); 


ttcv-c's you stav • 七七 o use 

七 ha 七 request object m 


This 

■the a^d t c ||s 

妞 C objedt how io 

~to "the sewev'. 


Let’s break that doivn a bit. 


method ’m’rbahz^s 

3 



...a^d 七 b mditaics ^o>w 

-to sev)d data -to i\\t scv-vcv-. 


This is ihc URL -fov iKc 
PHP sdv 中七 v-uhn'mg Oh 

otic’s y/eb sevvev-. 


TWis mea^s ttc 代 <\ucst should 
be asyndWo 的。奶 … m >wovds, 

七 Wis Icis Java£tvi\>*t ^oy/ Aa 七 I 七 
docs^t need to ⑽七 abound ^ a 
ves\>ov\se ^v-om 七 ’e s 

>wo 於’七 yA\ile 

server is a^sy/cv-mj ttc ^<\ucs-t- 




TKcsc av-c some yv'tibj 

adv 如 6ed tov\6e?*ts. 

youv-scl-f a -five i-f Y ou 
daw >wi*bV> 3^y °*f tV^csc 

'ues 七 10 灼 s o 灼 youv o>w 灼 . 


fRGOUGNTUil ASKED 

ESTIONS 


Ul I thought that it was better to use 
“POST” for web page requests. 

A: POST is usually used when you are 
sending a server lots of data, or are completing 
a form submit that involves money, or placing 
an order. Since we’re not sending any data to 
the PHP script, and there’s no purchase being 
made here, it’s easier to use a GET request; 
well look at POST requests a little later on. 

UI Should I ever use open() to make a 
synchronous request, and set that last value 
to “false”? 

AI Sure. Sometimes you don’t want the user 
to be able to keep using your page while the 
server is answering a request. For instance, if 
a user is placing an order, you probably don’t 
want to let them do anything else until you 
confirm that their order was accepted. 


26 


Chapter 1 





















next generation applications 


The &reat Code-Commewt Coupling Contest —— 

In an effort to save programmers time and prevent confusion, code 
fragments are marrying their comment counterparts across the globe, 
providing love, companionship, and self-documentation for all. 

Below, you’ll find several lines of Ajax-related JavaScript. Pair each line of 
code up with the comment that describes what it does. 


The Code 



The Comments 


/•^ Cv-ca*tc a now ob\cd*t h> talk HTTP h> a >wcb scwcv 


/ ^ Cv-ca*tc a new variable and assign i-t ttc URL h> a Java scwlc-t 


/ 决 Ih'rbializ^ a syndKvonous donncdtiorv using 6\f-T 决 / 


/决 In'rbializ^ dn asyndKvonous donnedtion using POST 


Mv. Code … 
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making requests with javascript instead of html 


createRequest() 


getBoardsSold() u datePage() 



So how*s it coming? Are we any 
closer to getting my web report 
back online? I’d love to know how 
many boards I’ve sold. 



Remember our checklist for getBoardsSoldO? 

You’re making pretty good progress in your code. Why 
don’t you check off what you’ve got done? 

匸 ] Cv-ca*tc a request objed-t by -the 
drca*tcRc<\ucs*tO -fuy\d*tior\. 

Q P»3^v-c ou*t URL you Y\tcd *to *to SO 

you c ^ y \ ge 七 updated board sales. 

Q £c*t up {\\t rc^ucs*t object bo make a 


□ Request ar\ updated hurwbev- o-f boards sold. 
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The &rcat Codg-Commgyit Couplmq Cowfgst 


Did you pair up the happy couples? Make sure you got all of these right, 
and if not, take your time and figure out what you missed, and why. 


v/on ’ 七 y/ovk 
or\ 


Meet the Happy Couples 



/ 决 Cv-catc a new variable and assign i-t ttc URL -to a Java scwlc-t 
var url = 'Vservlet/GetMileageServlet"; 



TW»s is a s—e 

Java^t 肅、 aWc . 


Rc<\ucs*ts be se>rrt 
via or POST- 



/ 决 Initialize an asyndKvohous donncdtion usmj POST 
request, open (''POST" , url, true); 


this is fslsc, the 
^^ucs-t will be syhdh^ohous. 


...dy\d ^cy\ iVs iv-uc, 
request >s 3syy\diiV"oy\ous. 
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sending a request to the server 


ouv ^cdklist ^om 

… 一 1 说心， 


Connecting to the iveb server 

All right! You’ve got a request object, a URL, and your connection 
is initialized and ready to go. Now you just need to make the 
connection, and request the updated number of boards sold. To 
do that, just call send () on the request object: 


function getBoardsSold() { 

createRequest(); 

var url = ''getUpdatedBoardSales-a j ax . php 


二 〜 7 

F, 9 ^c out y,ha{ URL y ou d , 

O R C o ucs l . a 〜匕 "U. 




,h 3 ^ this ksi ^ 


how. 


rr 


request. open ( 、 'GET 〃， 

request.send(null); 

YouVc 七 he 

V-C«\UCS-t ilCV-C... 


url , true); 

… Ad this mcahs -tKa-t youVc hot sehd'mj 

_ _ daia ir» iKc vc<\ucs-t. TKc stvipi 

doesr /七 heed ar»y dab; ii just 

boa\rd sales, cvcvy time its vuh. 



Are you kidding me? We did all this work, 
and you re telling me I*m sending null to 
the server? This is what you call next- 
generation programming? 



(a^d ihis 
P a 3^ a bii ahd 

nx'iss -this 
key poih^t. 


The server doesn’t need any data. 

In this particular app, you don’t need to provide 
the server with any information. Each request to 
the PHP script asks for the same thing: a single 
number, the total number of boards that Katie 
has sold. So you don’t need to send the server 
anything but null in your request. 
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next generation applications 


Reviewing what v/eVe done 

We’ve still got plenty left to do, but let’s take a moment to see what’s already 
done. Grab a cup of joe, let your brain relax, and review the first two steps 
in turning Katie’s report into an Ajax-powered app. 


o Create a new object to make requests to the server 

You added a new function, called createRequest (), < 
that creates a new request object. The code even works on 
different browsers. 


丁 Wis was 七 )^ ov-ij'mal 七 ask 
v/e Kad *to … 


•••3k>cI 


TW»s >n3s 
七 he ovi^mal 
HTML 
七 he Boav-ds 
欠 Us 研 . 



hire's wKa-t you did. 


Y otA II added "feliis 

JavaSd\rip-t ih-to -feKc Kedd 

of yowr HT/V)L. 


dvcatcRc<\ucs-tO 
r\o>w dvc3*tcs 3 Y\t^i 
vc«\ucsi objedt- 


❾ Write a JavaScript function to request new board sales totals 

You wrote another new function, called getBoardsSold (). 

This function used createRequest () to create a new 
request object. Then, you set up a variable pointing to the 
Ajax version of a PHP script on Katie’s server, initialized the 
connection, and sent the request to the server. 

Me Mo—’ 

yur\S 

ytBoav-dsSoldO 

^uwd.t»oir> 灼。如 “ 


eoo 

Boards 'R' Us 

CD 

「'▼ 鍰 

i t2r ©htT ◎▼) 

- ^ <. 



Boards 'R' Us :: Custom Boards Report 


Snowboards Sold 

1106 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 


Cash for the Slopes: $183297.38 

{Show Me the Money 



O Find: C\ 

Find Next Ql) Find Previous 


Done 


J 


/ ⑽ do^i ^ submit the 

a^Bo^dsSoldO -takes 
-the request -to -the 



SCV-VCV-. 




Request Total 
Boards Sold 


广 


— 


V^v C a” Aja%^cadv v 饮靡 

^ PHP 七 oy \ 

^at»cs scv-vcv- v>o>w, W- 
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connecting the pieces 


Wait a second... doesn’t the ''Show Me the 
Money" button still submit the form to the 
older version of the PHP script? And how 
does getBoardsSold() get run? I don’t think 
were done with Step 2 yet... 


There are still some missing pieces 

We’ve got to make sure that Katie’s web form 
no longer gets submitted to the non-Ajax 
version of her PHP script, or she’s going to end 
up with more page reloads, and all our hard 
work won’t be noticed! 

And not only that, but we’ve got to make sure 
that our new getBoardsSold () function 
gets called from the web form. It looks like 
we’re definitely not ready to start updating the 
page yet... but what do we need to do next? 

There are two major tasks we still need to take 
care of; use the space below to write out what 
you think needs to happen to finish off Step 2. 


STOP I 30 

oh *to *thc hcx*t 
^ 一^ Uhtil you^vc 

之 〆^ somcihihj 

-these bldhks. 
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Back to the HTML 



datePage() 


Do you see what you need to do? When Katie clicks the “Show Me the Money” 
button, the web form submits everything to the PHP script. But we don’t want 
the web form to get submitted, because we’re using Ajax to handle requests to the 
server. This shouldn’t be too hard to fix, though. 

Let’s go back to the HTML for the Boards ‘R’ Us report: 



Customer Boards Report</hl> 


<body> 

<hl>Boards 'R/ Us :: 

<div id= 〃 boards〃> 

<table> 

TW»s »s <tr><th>Snowboards Sold</th> 

ML- m <td><span id=^boards-sold^>1012</spanx/td></tr> 

<tr><th>What 工 Sell 'em For</th> 

<td>$<span id= A, price A/ >24 9.95</spanx/td></tr> 
<tr><th>What it Costs Me</th> 

<td>$<span id=’’cost’’>84.22</spanx/td></tr> 

</table> 

<h2>Cash for the Slopes : 

$<span id= 〃 cash 〃 >167718•76</span></h2> 

<form method= 〃 GET 〃 action^^getUpdatedBoardSales.php^> 
<input value=〃Show Me the Money” type=〃subip 
</form> 

</div> 

</body> 


<V>od7> "tay. 

vest of 七 ^ 
oW* 


"This 

shouldh’t submit 
"the -form 
3hyrhOV-C... 



...so you i-t -to be 

jus 七 a 於 ovmal •… bu 七 "ton. 



fRGOU£NTUil ASKED 

UESTIONS 


LI 二 Couldn’t we remove the action from the <form> tag, 
instead of changing the button type? 


ft I That’s a good idea, in addition to changing the button type. 
If you only remove the action, though, the “Show Me the Money” 
button will still try and submit the form... but with no action on 
the <form> tag, all you’ll get is a page reload. So be sure to 
also change the button type from “submit” to “button”. 
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avoiding form submits 


Running getBoardsSoldO from the web form 

The JavaScript’s ready, and the button no longer tries to submit 
the form... but right now, getBoardsSold () never runs, either. 

This shouldn’t be too hard to fix, though: 


Can’t we just run the 
getBoardsSold() function 
whenever someone clicks on 
''Show Me the Money ”？ 


• 40 

lovds irui 


O 

」 i t 

ji O’ 


boards f W Us r- Custom Boards Report 


Swwt»*rdi S4M 

idJiZ 



WiMt 1 fell 'em For 

S2.W5 



Wh*t K He 

%6*.22 



for thiE Slopes: 

ShAs Ut <Sh« 


n^y this button is didked... 



. 七 iiis Java£dvip*t -fuy\d.*tioh 
heeds {jo called- 






A Question For JavaScript - 

JavaScript we weed to run a function from our HTML. Can you help us out? 

Oh, well I’m incredibly flexible when it comes to calling functions from a 
web page. Just use one of my event handlers in your HTML. You can use 
onBlur () for when someone leaves a field, or onClick (), for when a 
user clicks... how about onChange (), for when a value changes... or there’s 
onFocus ()... wait, wait, I’ve got more... what do you mean, out of time? 
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next generation applications 


createRequest() 


Adding an event handler 

Any time Katie clicks the “Show Me the Money 55 button, the getBoardsSold () 
function should run. You can use a JavaScript event handler to take care 
of this. An event handler connects a piece of JavaScript code —— like the 
getBoardsSold () function —— to a certain event, like when someone clicks a 
button on a web page. 


getBoardsSold() u datePage() 



In the Boards app, let’s use an event handler to connect the “Show Me the Money” 
button to the getBoardsSold () function. Since you want to attach the event to 
a button click, use the onClick handler, like this: 





x V ^5»Oh of 


<form method= 〃 GET 〃 action= 〃 getUpdatedBoardSales•php〃> 
<input value=〃Show Me the Money" type= 〃 button 〃 

onClick="getBoardsSold();" /> 

</form> 


以 〆: :::: 

^Hbu-t c if v , 


y° u 


r 

titles -tWis bu*tW” 


… 仏 is -Puhd-tioh will gc-t 


<ruh. 


Reiistriirg tlje reef - 

Remember our highlight reel? Have you been keeping up with what 
we’ve covered, and what you’ve still got to look forward to? Let’s take a 
quick look at what you’ve learned in this chapter so far: 


TWis is why wc dhah 9 cd the 

U£how ^ ^ butU 

Java^ipt Wtio,, 

，hstcad ^ “3 it sub.it 
^iies web 


'Ascd 

■to 6vca-tc -tWis 


Asynckronous applications make requests using 

^ • 一 i 」 • 一 t 一 .k. ^ f__1 一 • i 


^r 




a JavaScript object, anct not a form submit. 


vc^cst object- 


JO-fe-fecKi "to 
"two 

^oh^cp-fes yet. 

I 





Your requests anct responses are kanctlect hy tke weL 
browser, not ctirectly hy your JavaScript code. 


Once tke weL browser gets a response to your 
asynckronous request, it will run a callback function. 
















updating the web report 


Step 3 ： Coding updatePageO 

So now you’ve taken care of talking to the server, and you’re 
ready to get the server’s response, and update the Boards 
report with new numbers. It’s time to write updatePage (). 
Remember what this function is supposed to do? 


createRequest() 



IwdslTUi 

O 





B«rcl¥ Us v. Custom Boards Re&ort 


SriowthHinli S-g>hl 

IUZ 

WlHt 1 Sell mm Rir 

S2 的 . 95 

Whit ttCiMtA m 

%6^：22 


for the Slopes: 

Shdnr Ui Cht Uofi#v 




-- 



Kov/ SCVVCVS VCS^SC 01 .I 7 ^as 

boards sold rn «t 




Updated Number' 
of Boards Sold 


updaicPagcO jcis iKc scwcv- , 5 
vcspoy\sc... 


\^jjy 


Boards 

Sold 


Cash for 
Slopes 


...ad 杻⑼ updates tV>c 
numbers m tV>c v/cb 



eoo 

Boards 'R' Us 


◦ 

4 >， 鍰 

◊ © ht ▼ ( ： ([GlO 


Boards 'R 1 

Us :: Custon 

i Boa 



Snowboards ^Ld 

1149 



II 'em For 

$249.95 



What it Costs Me 

$84.22 


^_ Cash fm Ihr 11 争 r $190423.77 


[Show Me the Money] | 



O Find: 
Done 







How can your updatePage() function get the response from Katie’s PHP script? 


Remember, the request to the script was made in getBoardsSold() … and this is 
supposed to be an asynchronous application. That means Katie shouldn’t have to 
wait around while the server is getting new sales totals. 


So how does updatePage() get the response from the server? Think about this for 
a minute or two, and then turn the page. 
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next generation applications 


I think we should call the updatePage() 
function at the end of getBoardsSold(). 
Then updatePage() can get the response 
from the server, right? 



Ajax is asynchronous JavaScript 

Remember, getBoardsSold () makes 
an asynchronous request. That means that 
the JavaScript doesn’t wait around for an 
answer from the server. 

In fact, the getBoardsSold () function 
will probably finish running before the 
getUpdatedBoardSales-ajax. 

php script even has a chance to finish 
processing your request. 



docs / 七 七叫咖 sc 
^vom server, u^datcPayO 

^ould vur. bcW sevvev V>as 
jfm-.sV>cd 70UV ^c<\ucst 


So if getBoardsSold() finishes running 
before the server responds, where does 
the response go? And how can we make sure 
that updatePage() runs when the servers 
finished with our request? 


Where does the response go? 

You’ve uncovered the trickiest part of 
asynchronous web programming: if 
asynchronous code doesn’t wait around for 
a response from the server, how do we use 
that response? And where does the server’s 
response go in the first place? 



You already know about web pages, 
which can use event handlers to call 
JavaScript functions. And you’ve seen 
how asynchronous JavaScript can make 
requests to a web server. To complete the 
asynchronous picture, though, there’s 
another important piece of the puzzle... 
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a simplistic view ol web applications 


How we see iveb apps … 

To figure out what’s going on, we’re going to have to step back a bit, and 
think about web applications in general. When you think about a web 
appl, you probably think about an HTML page, some JavaScript code, a 
bit of CSS for style, and maybe a web server running some scripts or a 
servlet. All these pieces work together, like this: 


You use HTML -to sav 

a ? a 3 c ,s " 


… and CS£ 
■to say Ko>w 
tKc page 
should look. 


</html> 

HTML 


TKc ttT/WL ahd CSS 
tombihcd ihio y/Kai wc actually 
see—-the y/cb pay. 





Browse Selection 


8 d-fl 4 Fintwy 



I 

II 因 BE 

SXliB 

y n 躅肉 n 



JavaScript 


CSS 


Request - 
Response 


You use JavaS6^\>t b> say 
y/Ka*t a docs. 


丁 he web sevvev waits oh 
^«\u C sis ; atid thch sc h ds 
da-ta batk ix> youv web pay. 



PttP shifts, Java scwlcts, 
(^uby ^v-oyams, a>r>d o-tiicv* 
SCWCV—Side C.om^o>rvC>r»*ts- 


But there’s more £|oin£| on than meets the eye 
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next generation applications 


命 



命 


It’s time to test those higher-order thinking skills. There’s an important 
character in the Ajax play that you haven’t met yet, and he’s ready to make 
his grand entrance. See if you can upstage this new character by figuring 
out who he is before you turn the page. We’ve managed to collect a few 
quotes from the mystery character to help you out 


Singing? Well a lot of people don't 
realize this, but 1 am classically 
trained. And 1 love Wagner^ 


r ^ive we your tired, your poor ： your huddled 
brackets yearnmg to be styled" 


"Sure, I love water sports. In fact I was an 
extra iw 'Point Preak", and almost got a 
lead role m ^loe Crush? 


Ycs ; ouv mys-tcvy 
-tends 

"t° be a bi-fc ovcvly 
a ■(: "tiroes 


I'm as tough as they come... IVe even been 
involved in a few wars over the years/ 






Wr\it you tuk 乩 avad^v* IS rn 七 Wis 

bUkxHb W” 如 to 兄 c 』 you wevc r\(^l 
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introducing the web browser 


Introducing the iveb browser 

Behind the scenes, something has to connect all these pieces together. That 
“something” is the web browser. The browser takes your HTML and CSS, and turns 
those angle brackets and semicolons into a page with graphics, buttons, and text. 

It’s also the web browser that runs your JavaScript code... behind the scenes, the 
browser takes care of important jobs like storing the values of your variables, creating 
new types, and handling any network requests that your code might make. 


li,S sio^s 

enable values 3hd 3ivcs 




y ° U " 6 ° dc ^ io 
^c^ucs-ts ahd responses. 


CSS 


HTML 


iKitcrwet Explorer 


Firefox 


Web Browser 


Opera 


Safari 


Mozilla 


TKc >yeb bvowsev 
-takes youv HTML 
and CSS-- 


• ahd k them i h ^o 
a visua l pasc that 

dah see. 


Web Server 


TV\e krovjscr also V^dles makmj 
vccyucsts^b V/cb sc^rvc^s, 
out y/V^at -to do ^rcs ? onscs \i 
acts bd£>k -fyorirv *tV\OSC SCWCV-S. 


W\\cy\ you *b/? c m a 以队， 
t\\tV a bu*t*toy\, ov- cn-tev- d 
value m a 必 cld, Wo^scv 

七 hose cvcnis on -to 
JavaS^i\>t for a 


yasses 


what wcV c 
^ ialkihj 

atou ^ ihese Iasi 
5CVC ^I pa 9 cs. 



I 彳 _: mm 



on {\\t scv-vcv- 
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next generation applications 


So now youre telling me that my code 
isn't making requests to the server? 
That \Ys really the web browser doing all 
that? I*m so confused... 

v.__ / 


The browser just helps out 

The browser isn’t doing anything that tricky. When your JavaScript needs 
to make a request, you write code like this: 

function getBoardsSold() { 

createRequest(); 

var url = ''getUpdatedBoardSales-a j ax . php^ ; 
request • open ( 、 'GET 〃 ， url, true); 
request.send(null); 

} 

All the browser does is handle the low-level network stuff that makes this 
code work. Since network connections work differently on each operating 
system (think Linux and Windows and Mac OS X), the browser handles 
the stuff specific to each system. That way, your JavaScript will work 
on any system —— and the browser takes care of turning your code into 
something each user’s particular computer understands. 

Take a look back at page 40, and notice that it’s the browser that actually 
handles sending requests and getting responses from the server. Your code 
tells the browser what to do, and then the browser takes care of actually 

doing it. 




Your requests and responses 
are kanctlect ty tke wet 
browser，not ctirectly ty 
your JavaScript code. 





Why do you think it’s so important that the web 
browser handle requests in asynchronous 
applications? Remember, a web server can only 
respond to whomever made the original request 
to that server. 
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web browsers have a lot to say 


The laroivser £|ives the server’s response to your JavaScript 

Since the browser handles sending requests, it’s also responsible for getting responses 
back from the server. Let’s see what the browser is doing in the Boards app: 


① The browser displays the boards app to Katie 


Hcv-cs 


boards.html 



Firefox 

Web Browser 

Opera 

Safari 

Mozilla 


col 


TV\c broyjscr HTML 


7©u 

^v-ovidc 
*to tVic 
v/cb scv-vcv. 


Internet Explorer 


ay,d CSS i\\t >/cb server. 



What ^ti C sccs 



Boards 'R' Us :: Custom Boards Report 

Snowboards Sold 1012 I 
WVMt I S«N ••，! For $2«f .95 
W”at K Costs Hu $94.22 

Cash for the Slopes: $167718.76 

tht Morxy 

OA l-MUMal — 



•ahd "tuVhS *tliCnr» iirto "this. 


® The browser runs the get^oardsSoldO function 


tlitks 七 Wis 
buttoyv.. 



.• 如 d the bvowsev sees that 
onClidk is aiiatUcd -to -the 

3ctBoa^ds£oldO 



yar getBoardsSold () 



JavaScript 


® The browser runs the createRequestO function 


Its attually ttc 火 A 

Wo>wscv- *tKa*t »s Vuvmnr^ all 
youv- JavaStv-if*t 6odc. 


Tk jc-tBoav-dsSoldO 

•fWtioh ts\\s -the 


^caicRc<\ucsi() fun^iior\. 



6oU ^ 

oy ,^c Wowser ^ V^cl? 
trtah a 代 ― 
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next generation applications 


④ The browser sends a request to Katie's web server 


， y ^ 


TV\c bvo>/scy- 
^'ijuv-cs out 
\\o^i bo make 
a vc'uest 
Katies sys-tcm 


Request Total 
Boards Sold 



JavaScript 


tel 


Youv- todt asks 七 hat 
a y-c«yucs-t be sc 灼七 l >7 
tallm3 vc<\ucs-t sc^d^ull);. 


<?php 




require('lib.php ( ); 


function go() { 
$myVar = .•• 


PHP script 


⑤ The browser returns 'fcowtror to Katie 

TV\e Wowscv v-ctuv-v^s do^-tv-ol *to ttc usev-, 

smt c you made asyndWo^ous 代 'ucst.. 

iVs bema V^dlcd bcWmd s 



Internet Explorer 

Firefox 

Web Browser 

Opera 

Mozilla 


It 




lo«rd 

0»« ， 


Safari 


var requ< 
function 


getBoardsSold() 



Boards 'R' Us :: Custom Boards Report 

I 1012 1 

Df f24f.fS 
I $84.22 

Cash for the Slopes: $167718.76 




JavaScript 


^siic dah keep usmj 
"the vepovt (even 
■though -thcv-c s hot 
^udh she tavx do). At 

least she ish’t s-tavihj 
a "t a spihh'mj beddK 
ball oy dh houv-jlass^ 


® The browser gets a response from the server 

TKc stv-ift sc^ds its v-csfov^sc 
badk to ttc Wo>wsc\r. 


Number of 
Boards Sold 


<?php 




b.php 1 )a 


function go() { 
$myVar =... 



PHP script 


docs i^ c 
do wi-th ihc 

^po^cf Yo^ll oui 

° h Uc ^ 咖 … 
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talking to the browser 


IVhat should the broivser do with the server’s response? 

The browser gets the response from the server, but won’t do anything with 
that response unless you tell it to. So we need to figure out a way to let the 
browser know to run our updatePage () function once it gets a response. 


^ fS 




Boards 'R' Us :: Custom Boards Repor 



—t 1 Request Total 
s ld (「Boards Sold 





PHP script 


TV^C scwcv- yts d vc<\ucs-t 
-(•yom 七 bv*OV/SCV-’ 

bdsed oy\ ouv todc 

ytBo3v*disSol d() … 


Number of 
Boards Sold 


:: 二:二 



bv-owscv yfes 

"the 代 spouse, bu*t 

doeWt know y/ha-fc 

do wi-tli it 




Now wte 
do I do? 


Or\tc >/€ tVic bv-ov/sev- *to 
vu” u?datcPay () c w 

use JavaS^'»?t -to ^da-tc 
Boavdis vc\>ov-t 




function 
updatePage( 



JavaScript 


Boards 

Sold 


Somchov/, y/c r\ttd *to *tcll *thc 
b\rov/sc\r *to \ru^ updatcPa^cO 
y/hc 的••七 yts a response -fvom 
the sc\rvc\r. 


0O0 

Boards 'R' Us CD 

令▼令銮 © A 

© ht ▼ 

OTET" 

‘Boards 'R' Us :: 

Custom Boards Report 


Cash for 
Slopes 


In just a -few pages, you’ll Icav-n 
about how {o use tKc DOM-*thc 
Podumcht Objcdt Modcl-io make 
dKanjcs like this *to youv- web page, 
all without any page \rdoads. 
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next generation applications 





Tonight’s coffee-loving, jittery-handed guests ： 

Web Browser and an HTML Page 


Browser: Hi there, HTML. Good to see you again. I 
was just talking with your buddy, CSS. 

HTML Page: Oh yeah? I've been hanging out with 
him a lot more these days. It seems people must be 
reading up on using CSS in their pages... we both 
love it, though. 

Browser: Yeah, I'm a big fan. Although it does 
mean I have to do some extra work, since I’ve got 
to take two files and combine them together. 

HTML Page: You have to do work? What do you 
mean? I’m the one who had to say farewell to old 
friends like “align” and “font face”. I don’t see what 
any of this has to do with you. 

Browser: Are you kidding? You markup language 
types... always in the dark. XHTML is the exact 
same way... without me, nobody would even see 
you guys! 

HTML Page: What, just because you’re the 
program that lets people look at us? Look, the only 
reason you even exist is to let people view my 
markup. 

Browser: Boy, you just don’t have a clue, do 
you? People can “see” HTML with a text editor... 
but nobody cares about your angle brackets and 
<head> tags. People want what I make out of you... 
a visual page, with images and tables and links. 

HTML Page: Delusions of grandeur … geez. Yeah, 
I’m sure people are beating down your door to see 
how many different ways you can display the same 
web page. Yeah, I just love web browsers, and how 
they’re always screwing up how I look. 


Browser: The browser wars are coining to an end, 
you big uninformed bucket of brackets. Besides, if 
people would just write standardized web pages, 
there’d hardly be any problems. 

HTML Page: Oh, really? That’s not what JavaScript 
has been telling me. He was just complaining the 
other day about having to use two different types of 
objects for making a simple request to a server. 

Browser: Hey, two is a lot better than five or six... 
and with some of the new releases of browsers like 
Internet Explorer and Mozilla, I'll bet well be using 
just one type of request object before you know it. 

HTML Page: You sure seem to think you have all 
the answers. 

Browser: Maybe not all the answers, but I do have 
all the responses. And that’s just one more thing 
you need me for. 

HTML Page: All the responses? What are you 
talking about? 

Browser: Maybe you should ask your friend 
JavaScript about that. Everyone seems to think that 
it’s web pages and code that make requests... 

HTML Page: Exactly! 

Browser: … but it’s really me, behind the scenes, 
making sure that pages look right, requests get sent, 
and responses are heard. Without me, you’d just be 
a bunch of funny characters in a text file. 

HTML Page: … grumble … grumble … 
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who has the server’s response? 


createRequest() 


getBoardsSold() updatePage() 

t — ^Timc io 50 badk -fco 

^"tBoavcisSoldO ； how "Bia 七 


So how do we talk to the browser? So far, 
all the code we've written just deals with 
that JavaScript request object. Wait a 
second... thafs it! Can we use the request 
object to talk to the browser? 



wc’vc leaded a little 

^bou-fe y/cb b\rowsc^s. 


Sending instructions to the browser 

Remember, we’ve got to tell the browser what to do with the server’s 
response to our request before we make the request... because once 
the request is made, getBoardsSold () finishes running, and our 
JavaScript code won’t know what’s going on with the request. Fortunately, 
the request object we’ve been using has a property just for this purpose: 


function getBoardsSold() { 

createRequest(); 

var url = ''getUpdatedBoardSales-aj ax.php 
request • open (''GET", url, true); 


n 


request.onreadystatechange = updatePage 


request.send(null); 



V^cvc, ttc WoY/sev Will 
a vcs\>o^sc ^v-ow tv^c SC'TVCV. 



Be su\rc you sti this 
popcirty beW you dal I 
sChdO ； oY "tKis •puhd'tioh 
七 \ruh- 


v/oh 


Java£dvift vc<\ui\rcs 七 ha 七 you 
leave tKc pavcn-tKcscs on 
tKc -fuhdtioh r»amc Kcvc- 
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PHP script 


Number of 
Boards Sold 


TV\c bvo>wscv 
t\\ttVs 七 V\e 
ve'ues 七 obje6 七 
{jo see >wV\a*t «"t 

should do 灼 c%*b”. 



do I do? 


request.onreadystatechange = updatePage 

… -fihds ou-fe 
•七 should muh -feKc 
upda-tcPajcO 
OavaS^irip-fe -fuh^-feioKv. 



JavaScript 



|R£OUGNTLy asked 

UFSTIONS 


LI 二 The server talks to the browser, the browser 
talks to the JavaScript, the JavaScript updates our 
page... I’m lost. Can you run that by me again? 

A 

fil Remember, these are asynchronous requests. 
When your code tells the browser to send a request to 
the server, the server has to respond with an answer— 
but your code doesn't wait around to find out what that 
answer is. So when the server responds, it's left to the 
web browser to figure out what to do next. Since there’s 
no running code waiting for a response, the browser 
runs the function you assigned to the request object’s 
onreadystate change property. 

Remind me again what onreadystatechange is 
all about? That seems sort of confusing to me. 

Al It’s actually not as difficult as it might look. That 
property just tells the browser that when the request’s 
state changes—like when the PHP script responds to the 
browser—the browser should call the JavaScript function 
indicated in the request object. In this case, that’s the 
updatePage function. 

So are there things besides the script finishing 
up that can result in updatePage() being called? 

Al Yup. Web requests can be in several different 
“ready states”，and each time the ready state changes, 
updatePage () is called. Well dig into this much 
more in the next chapter, so keep this in mind. 


翁 


Once tke wet browser gets a response to your 
as^nckronous request ， it will ” call back” your 
JavaScript witk tke server is response. 
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a little help from the browser 


createRequest() 


Getting the server’s response 

We’re finally ready to code update Page ()... right? Since you’ve set up the 
onreadystatechange property of the request object, the web browser will run 
updatePage () when the server responds to the request. But something’s still missing. 



You can get 
tke server^ 
response 
using tke 
responseText 
property 
of your 
JavaScript 
request object, 


I see how we can get the browser to run 
updatePage() when the server responds, 
but what about the data that the server 
responds with? How do we get access to 
that in updatePage()? 


The browser helps out again 

You’ve already seen how to tell the browser to 
run the updatePage () function when the 
server responds, but the browser — and that 
request object you’ve been using — does even 
more to help you out. 

Once the browser gets a response from 
the server, it figures out what to do 
next by checking the request object’s 

onr e ady s ta te change property. And, 
since you’re going to want the data the 
server returned, the browser puts that data 
in another property of the request object: a 
property called responseText. 

So any time you want to figure out what the 
server returned in its response, just access the 
request object’s responseText property. 




I，, Ul Woviscv sets a 

bcW •七咖 Jav 命 七 

Stav Wd to ^ out 

诎 at ? 叫狀七必 da.. 
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next generation applications 


Work It through 


YouVe already seen two of the properties from the request object weVe 
been using. Now ifs time to put what youVe learned to the test. Pelow 
ow the left are several properties of a request object and on the right 
are descriptions of these properties. See if you can watch the property 
name to its purpose. 




vcadySia-tc 




s*ba*tus 


T\\t HTTP status toAt 

-fv*ow\ scv^vcv". 

JKc W ^ 七 ^ bv-o>wscv *to 
vum v/Kcy> *tv>c sevvev ves^ds -to 
youv* vc^cst 

f\ number *md*i6atm5 v/ht state 
七 he vc<\ucs*t is loadm% 狀 

^oyrtss, ^mis^cd ^odcssm^ cU- 

TV>C da-ta reWed ^v-om 

七 he scv-vcv- \y\ rcs^sc "to 
youv revest- 


You have〆 七 scor> some o-f 七 hese 

^vo^cvtics yet, but 50 ahead 扣 d 

-take a ^uess a*b 4a 七 catK docs. 


琴 

m: i 

: 淺 SL 么 
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preparing to update the web report 


createRequest() 


Planning the updatePageO -Function 


The browser stores the server’s response in the request object, and then runs 
updatePage (). We're finally ready to start coding this function. Let’s see what 


we need to do: 


First: Get the updated number of boards sold 

The server returns this number to the browser, and then the browser 
puts this value in the request object’s responseText property: 


function updatePage() 
var newTotal : 

} 


request.responseText 


A 

Wtrts i\\t object aja'm- 


objedt tKa-t tKc b\rov/s 饮 "to pass Oh 


Second: Get the HTML elements you need to update 

There are two elements you have to update: the number of boards 
sold, and the cash that Katie has made. You can use JavaScript’s 
getElementByld () method to grab each of these based on their 
id attributes. 


-bo a vaviable, so 
you tdv\ easily 

youv todc latcv*. 


function updatePage() { 

var newTotal = request.responseText; 


var boardsSoldEl = document • getElementByld (''boards-sold 〃） 
var cashEl = document • getElementByld (''cash") 


Rcmcmbcv ho>w ^atiC 
added id attvibu 七 es *to 
Kcv <span> dements so 
sKc dould style 
y/itK CSS? TKosc s3mc 
id 3"t"tvibu"tcs mdke i"t 
easy -to addess cadK o( 
七 he <s^>an> elements m 
ouv Java£dvip*t todc- 


V-CpVCSCir\is iKc 

HTML pay … 


… ahd jrtElc^ch-tByldO -fmds 

tlie clcmch-t v/iiK the (D you 
pass ih-to iKc -fuhdtioh. 



eoo 


Boards 'R' Us 


CD 








Boards 'R' Us :: Custom Boards Report 


Snowboards Sold 

1012 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 


Cash for the Slopes: $167718.76 

Show Me the Money I 



O Find: 


Find Next 

Q-j) Find Previous 


Done 




A 


TKcsc avc iKc i^ames 
o-f tlic HT/V1L 
clcmchis wc wah-t 
■fco jc*t. 


<s^by\ id^boavds - sold">l0l2*</span> 



< s? a, -,a^^>l^l«^</s ? a,> 
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next generation applications 


Third: Add a reference to Katie’s text utilities 

Now you’re ready to update the total number of snowboards sold. It’s 
going to take a little bit of advanced JavaScript to update the text in 
those <span> elements. We’ll cover these techniques in Chapter 4, 
when we talk about the Document Object Model, but for now, Katie has 

in a JavaScript utility file, called text-utils . js. 


some 


P^-Assewgi-ei) 



V^a“i hC ( W 一 

i h 

of iW ls 

cxa^p| cs . 


TWis is all m 七 he 
<\\tad> o-f youv 
HTML pay. 


JavaSc^fpf 

This file has some handy functions you can use, but you need to let the 
Boards app know where to find these utilities first. You can add in a 
reference to Katie’s JavaScript utilities using the <script> tag in your 
HTML, like this: 

<head> 

<title>Boards 'R/ Us</title> 

<link re1=^stylesheet^ type= 〃 text/css 〃 href= 〃 boards•css 〃 / > 


<script type="text/javascript" src="text-utils•js"> </script> 


〈script language="j avascript" type=’’text/j avascript"> 


Hcvc S all ttc Java£6n\>t 

6ode you vc y/V"i 七七⑺ in *tV\is 


Add tWis Ii hc , ahd i\) C 

y° u all -the 

uiilii y Wi 。 

^iMilsjs i h y ou ^. 


Fourth: Update the report with the updated board sales 

The text-utils . js file has a function in it called 
replaceText (). You can use this utility function to update 
Katie’s report with the new number of boards sold: 


丁 w»s WW' s 

(Jicfmcd w 

\A/c W 

•talk move aloou-b 
从 esc 

\aW rn V)ook. 


t ， w? dat e a ^ on tv，e 


function updatePage() { 

var newTotal = request.responseText; 

var boardsSoldEl = document. getElementByld (''boards-sold^) 
var cashEl = document. getElementByld (''cash^); 


replaceText(boardsSoldEl , newTotal) 


TWis is i\\t element 

七 c% 七 …， 11 h plated- 


•and *tKis is value -to 
\rcpladc wi*Bv 


tWis todt v-u^s, tKc v/cb 

u ? datcd ^ 

七 _ -total -fov- boav-d sales. 
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a javascript exercise 


createRequest() 


getBoardsSold() updatePage() 



Just Vo It - 

^0/ 一 

You’re ready to finish up the updatePage() function on your own. Below is the 
code for updatePage(), but there are plenty of blanks left to be filled in. Try 
and figure out the code that belongs in each blank, and write in your answers. 

Once you think you’ve got all the code filled in, be sure to compare your 
answers to ours on the next page. 


function updatePage() { 

var newTotal = request.responseText; 

var boardsSoldEl = document. getElementByld (''boards-sold A, ); 
var cashEl = document • getElementByld (' 、 cash"); 
replaceText(boardsSoldEl , newTotal); 


/* Figure out how much cash Katie has made */ 


var priceEl = document. getElementByld ('' 


)； 



var cashPerBoard 
var cash = 


* 


/* Update the cash for the slopes on the form *, 
cash = Math.round(cash * 100) / 100; 
replaceText(cashEl, _); 


jc-tTcx-tO is 

tcxt-ut,|s.js. H W i|| 

ahd \rc-tu\Th -the -tex-fe 
wrthm tKa-t element 



This little tvitk makes suve ihai 
-total V^as -two dc6iw»al 

like d JrvoVmdl dolldV* V3luC- 
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next generation applications 


IfRGOUGNTUil ASKED 

QUESTIONS 


LI I You’ve mentioned the Document Object Model a 
couple of times. What’s that? And what does it have to do 
with Katie’s web report? 


AI The Document Object Model, called the DOM for short, is 
how web browsers store and represent HTML pages. By working 
with the DOM, you can dynamically update a web page, like 
you're doing with Katie’s report. We'll look at the DOM in detail in 
Chapter 4, but for now, you can just use the text-utils. js 
utility file, and not worry too much about the details of the DOM. 


*^|eA ^e||op |e«*-Aou e ^\\ 
A|uo seM 

^ y 叫 从 ns v 叫 3 IWI S, M± 


d 


- - pue 

ll IM -〒乂汾 
^ s! 


i ( t|S 它 0 y Taqspo) ^X0i©op-i ： d0j 

• y 00T / (00T 不 qspo)punoj*q^PW = ^s^D 

/^ \3Uloj ©qq. uo sedo^s ©qq. jloj qspo ©qq. ©q.ppdn 


各 soo 


|^0|M3U 冷 卩儿 0^1 勿 l|S 它 0 

_ - aooa~ = 



=qspo jpa 

羅 

(Xa^-soo) q.x 0 ,iq .06 = q.soo jpa 




aoud 


pjApflMalpaB - "*q.u 0 uinoop = ■ Illsoo 

)q.X0X^.©5 = BDTJCd JPA 
: I^OTJLd JPA 


• ( popa 

、、 ） piAgq.u0ui0xa^.95 * q.u 0 uinoop 


/ 3 (. ©ppui set[ ©Tq.p^; qseo qonui Moq q.no */ 


i (x^oxm©u y lapiosspjpoq) q.x© 1 i0op-[ c 5 0j 
i ( /y qspo vv ) piAgq.u0ui0xa^.95 * q.u©umoop = 
i ( /y pios-spjpoq vv ) piAaq.u 0 ui 0 xa ^.©5 * q.u 0 umoop = lapiosspjpoq jpa 

/ q.x0ji©suods0j * q.s©nb0j = jpa 

} () •它 pdn uoTq.ounj 


■SJ0MSUB jnoA u| 01 |jm pue ( >|UB|q i|OB0 u| s6uo|0q ;bl |； 0poo 0ij ； ;no 0jn6 |； 
pue Aj 丄 u! p0||^ eq o; ye| s>|UB|q p A^ueid aie aiei^ }nq ‘()96ed 印 epdn jcy epoo 
eq; s| MO|0g 'umo jnoA uo uojpunj ()96ed9iepdn 0i |； dn i|s!u!j oj Apeai ai‘no 人 

- ⑽ ?/ 以/叩 *1 呀 
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ready states and the request object 


createRequest() 


getBoardsSold() updatePage() 


Make sure the server is finished 


Right now, your updatePage () function assumes that the server is finished 
when it runs... but that’s not the case! To understand what’s going on with your 
request, it’s time to learn about ready states. Your request object has a ready 
state that tells the browser quite a bit about what state the request is in. 



Hcv-c, IS just 


Now -tKc \rc«\ucs-t is 
bcihj wo\rked 


Oh... 



Request 


TKcsc avc tKc vc^ucs^s vcady states. 


Response 


All dorst! TKc 

sc\rvc\r ； s \rcspoK>se is 
<rcady -fco be used. 



PHP script 

7"V\c sewv’s almost •(•misled 
W\i\\ 七 he v-c«\ucst ⑽ >n. 


A reaefy 

state 
tells tke 
browser 
wkat stage 
a request 
is in. 


Ready states are connected to your request 
object’s onreadystatechange property 


Do you remember the property you used in getBoardsSold () to tell 
the browser what to do when the server sent back a response? Take a look 
to refresh your memory: 


function getBoardsSold() { 

createRequest(); 

var url = ''getUpdatedBoardSales-aj ax.php 
request • open (''GET", url, true); 

request.onreadystatechange = updatePage; 

request.send(null); 


rr 


TV>is pv-opev-ty scis 

bv-ov/sev- should v-un cvev-y 
-time i\\ai request's 
ready s-taic Aa 哼 s. 


This p\ropc\rty aUttU cycjry v-cady siaie, 
y^oi jus-t iKc ohc ihdidatihj iKa-t ihc 
sewev is -fihislicd v/rtli a \rc<^ucst. 
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next generation applications 


Checking for the right ready state 

You already know that the browser will run your updatePage () function when it gets a response 
from the server. But, there’s a twist: the browser actually runs updatePage () every time the ready 
state changes, and not just when the server is finished sending back a response. Look at the diagram 
on page 54 again, and notice that as the request is progressing, the ready state number changes. 

It looks like when the server is finished with our request, the ready state is “4”, so we can check for 
that number in our code. That way, we can make sure that we only try and update Katie’s report 
when we know that the server has sent us back a response. 


\rcadyS-tatc is i\\t v-c<\ucst 

object tKat s*tovcs i\\t 6u\r\rcv\t v-cady sia 七 

function updatePage(). 


This -Puhd-tioh 
will jc-t vuh 

the vcady 


todc 




if (request•readyState == 4) { 

var newTotal = request.responseText/ 
var boardsSoldEl = document. getElementByld (''boards-sold^); 
var cashEl = document. getElementByld (''cash^); 
replaceText(boardsSoldEl, newTotal); 


★ 


Figure out how much cash Katie has made 


★ 







/* Update the cash total on the web form * 



^ code ohly 

，必 ^ dy 
午 , 

W do 叱 


Dor/ 七 -fov-jci 七 lie dlos'mg bvatket 


sewev- »s fiwsKcd 
y^ucst, 如 ^rcady state 
yAll be f … 如七 mca^s i\\ai sa^c 
to use tKc data tKat tKc server 


batk (孙 d 七 ^ 七从 c Woy/scv sWd 
jcyucst objc6 七 ) • 


m 


^ouv 




TKc sc\rvc\r is 
V-ctuv-hihj -fcKc 
W/ sales humbevs, 
v/Kidli -the PHP 
s ^ift -fijuved out 
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a little q&a 


createRequest() 



Open up your boards . html file, and add in all this new JavaScript. Make sure your 
updatePage () function has the JavaScript that checks the request object’s ready state, as well as 
code to update the total board sales and figure out how much cash Katie has made. You also need 
to make sure you’ve got a copy of text-utils . js in the same directory as your 


boards . html and boards . css files. 


Ql At the end of the updatePage() 
function, on page 52,1 don’t 
understand why you multiplied the 
cash that Katie’s made by 100, and 
then divided it by 100. Won’t you get 
the same number you started with? 

Al JavaScript can be a little weird 
about multiplying numbers. A lot of 
times, it will add a bunch of decimal 
places to a product. So instead of getting 
59.95, JavaScript might come up with 
59.9499995. That’s clearly not what Katie 
wants to see on her report. 

To fix a number like 59.9499995, first 
multiply it by 100, to get 5994.99995. 
Then you can use Math, round () to 
round this to the nearest integer, which 
is 5994. Finally, divide this result by 100, 
and you'll get 59.94... just what Katie 
wants. 

LI : What does the getText() 
function do? I see we’re using it in the 
updatePageQ function, on page 52. 



fRGOUGNTUzl ASKED 

UGSTIONS 


fil getText () is another utility 
function, like replaceText (). You 
pass it an element from a web page, and 


it will return the text within that element. 


In Katie’s report, getText () gets the 
price Katie sells her boards for, and how 
much it costs Katie to make a board, both 
from <span> elements in Katie’s HTML. 


Ql So what about all those utility 
functions in text-utils.js? Do I need to 
worry about those? 

AI As long as you reference 
the text-utils. js file with a 
〈 script 〉 tag, your code will work fine. 
Those functions use the DOM quite a bit, 
and well explain all of them in Chapter 4. 

We've also included all the code from 
text-utils. js in Appendix I, but 
don’t worry if you don’t understand it all 
now. By the time you’re done with this 
book, all those utility functions will make 
sense to you. 


And the DOM is how we work 
with an HTML page? 

A: That’s right. Web browsers use the 
DOM to represent an HTML web page. 
Your JavaScript can use the DOM to 
update values in a page on the fly. 

In fact, you’ve already been using the 
DOM a bit! Every time you use the 
JavaScript document object, or call the 
getElementByld () function, you're 
using the DOM. 

Ql And the readyState property... 
can you explain that again? 

Al readyState is a property of the 
request object, and lets you know what 
stage your request is in. We’ll spend a lot 
of time on this in the next chapter, but for 
now, you just need to know that when the 
readyState is 4, the server is finished 
with your request. 
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next generation applications 


Showing Katie some Ajax magic 

It’s time to see what all this hard work has done for Katie’s web report. 
Make sure you’ve added all the JavaScript we’ve talked about in this 
chapter, and double-check that the “Show Me the Money” button runs 
getBoardsSold () ， instead of submitting the form. Then, load up 
boards . html in your web browser, and let’s see what Ajax can do! 


0 OO 

Boards 'R' Us CD 

.'P ， 髮 V 1 

0 ht ▼ 

O r (G0 W 

Boards 'R' Us :: 

Custom Boards Report 


Snowboards Sold 

1012 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 


Cash for the Slopes: $167718.76 

Show Me the Money 


Find: 


Done 



//• 


Clitk oyx w ^o>M Me 

七 Mo〆/ … 



eoo 


Boards 'R' Us 


CD 


...ahd k>o page 

reload. Pcv-fcd-fe/ 







◊ 0 ht 






?>o{h iiic -boial 
boards sold 
i\\t task 

made joi u^daied. 


Boards 'R f Us :: Custom Boards 


Snowboards Sold 

1149 

What I Sell ’em For 

$249.95 

What it Costs Me 

$84.22 


Cash for the Slopes: $190423.77 

IShow Me the Moneyi | 



Find: 


Done 




Check it out for yourself! 


Boards 'R' Us 


[^ I [ C ] [ + http : / / www.headfirstlabs.com/books hraj ax/cha pterO 1 / boards /boards, htm 1 






















































the ajax experience 


RgyiQiiiiy g the i? jgHjgl? t reel 



As/ncJirprLPus applications make requests 

iBin^ aJaVaScript obiectrjmd not a form 



Y pur requests and responses ore JiandleJ 
by the Wek trpwser, not directly \>y 
yQur JaVaScrfpt code* 



Once tLe Wet trPWser gets a response tQ 
your as/ncjirpnpus request, it Will ’’call back” 
your JaVaScript With tLe server's response* 
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AJAX 

S 了 PRIZE 


You did it! You took a boring 
sales report and turned it 
into a dynamic Ajax application! 

Nice work. Katie’s web report is back online, 

Katie knows how much cash she’s making — 
without having to wait on her server or suffer 
a bunch of page reloads —— and with all that 
profit, Katie’s even offered to give you free 
snowboarding lessons. 










next generation applications 


Wait! Stop the presses/ 


bv-ot^cv- Wmcss 

w ar>ayv. Hcs a d»dd 
Wmdov/s cvcw t^ou^ 
W»C »S a Mat - Uct 


Everything works on Katies Mac, but on my 
Windows machine, I only get new sales totals 
the first time I click ''Show Me the Money”. 
After that, I just get the same numbers 
over and over... whafs up with that? 



r 




Boards "R* Us - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 
O Back ▼ 」 • y Search Favorites ^ 


BSD 


團•逢 


Address L^) http://www headfirstlabs.com/books/hrajax/chapter01/boarcls/boards.html 


▽ H Go 


Links 


Boards 'R' Us :: C 


Snowboards Sold 

1593 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 


Cash for the Slopes<4264007.8S 


TV^c Wc 

usm^ |y>tcv\r>C"b 

仨 TOplovcv, 
cvcvyU^ 
v/ov-ks yea 七 … 




3 Boards _R’ Us - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 
(jBack ▼ ©▼SBJft / Search 


B0B 


Favorites 


Address http://www.headfirstlabs.com/books/hrajax/chapter01/boards/boards.html 


■ H 60 


Bpiards 'R' Us ： v 


Snowboards Sold 

1593 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 


Cash for the Slopes/?264007.8? 



...bu"t "tKch ； catK tn^c you press 
w SKoy/ Me tKc /Hohcy w , -tKc same 
hUi^bdrs dome ba^k up. TKc^c's 
dc-fihitcly a piroblcm iVi^dows. 



3 Boards 'R* Us - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 
■ J Back ▼ 」 d P Search 


□ 回 ® 


Favorites ^ 


Address |^| http://www headfirstlabs.com/books/hrajax/chapter01/boards/boards.html 


Boards 'R' Us :: C 


Snowboards Sold 

1593 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 



Cash for the Slopes<^264007.8^> 


IVhat’s going on? 

Did we do something wrong? 

Do Ajax apps not work on Internet Explorer? 

For answers to these questions and more, you’ll have to ivait for Chapter 2.. 
















































reviewing chapter 1 


60 Second Review 


• Traditional web programming involves 
making requests to a server, and getting 
back a response, usually with updated data 
wrapped up in a completely new HTML page. 

• Ajax apps use asynchronous JavaScript. 

• Ajax applications can make requests and get 
responses without reloading an entire page. 

• Asynchronous JavaScript doesn’t wait on a 
server to respond to a request. Users can 
keep using a page, even while the server is 
still working on the request. 

• Web browsers turn HTML and CSS into 
pages you can see on your screen, and take 
care of running any JavaScript in the page. 

• In Ajax applications, servers usually send 
back just the data you request, without any 
additional HTML markup and presentation. 



• You can use JavaScript to make both 
synchronous and asynchronous requests to 

a web server. 

• JavaScript offers several event handlers to 
call JavaScript code when certain events 
happen; onChange() and onClick() are two 
common examples. 

• The browser always knows what ready state 
a request is in, and makes that available to 
your JavaScript functions. 

• You can have the browser run a JavaScript 
function every time a request’s ready state 
changes using the onreadystatechange 
property in your request object. 

• When the ready state of a request is “4”， the 
request has been processed, and the server 
has a response ready. 
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next generation applications 


Exercise 
Solutions 


Po It Solutiom 



Open up your boards . html file, and add a new JavaScript function called getBoardsSold () ， 
right after createRequest (). Then, see if you can add a line of JavaScript in 
getBoardsSold () to create a new request object (that’s Step “a” from page 18). 

〈script language="javascript" type=’’text/javascript’’> 

var request = null; 


All *tKis is ilic pvc- 
assembled JavaSdvipt you 
should Kavc -typed m- 



function createRequest() { 

try { 

request = new XMLHttpRequest(); 

} catch (trymicrosoft) { 
try { 

request = new ActiveXObject ( 、 'Msxml2 .XMLHTTP"); 

} catch (othermicrosoft) { 
try { 

request = new ActiveXObject(''Microsoft.XMLHTTP ’’）； 
} catch (failed) { 
request = null; 



if (request == null) 

alert (''Error creating request object!"); 


function getBoardsSold() { 

createRequest(); 


^ sia^i o( y ouv . 

jctBo^dsSoldO WW.. 


</script> 


… uses tv-caicRc^cs-tO -to 
yt a objeti 
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whafs the goal 



It’s time to test those higher-order thinking skills. There’s an important 
character in the Ajax play that you haven’t met yet, and he’s ready to make 
his grand entrance. See if you can upstage this new character by figuring 
out who he is before you turn the page. We’ve helped you understand what 
each quote refers to with a few notes below. 



"Singing? Well a lot of people don't 〆 一 
realize this, but 1 am classically 
trained. And 1 love Wagner^ 


Hcvc S 咖 a web Woy/scv 


_ "^ive we your tired, your poor ： your huddled -— Tha 仏 d^tdy a 
brackets yearning to be styled" 

“ WT/VIL 


_ "Sure, I love water sports. Iw fact I was an 

extra in 'Point 会 reak 二 and almost got a 一 Su ^ ih 9 •- ‘ 或行 抑 ail 
lead role in 'Woe Crush? about ^ swr % 


Nc*ts^\>c vs. 16 , a^yo^c? 
Rcmcmbcv tKc 


? 


rw as tough as they come... IVe even been 
involved in a few wars over the years/ 




The Web browser 
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next generation applications 


Work It Through- Answer^ 

WeVe gomg to need a couple of JavaScript functions to turn Katie's 
report into an Ajax-powered app. Pelow are the names of three 
JavaScript functions. Prawa line connecting each function name to 
what you think it will do in the final version of the boards app. 


^ctBoavdsSoldO 


u?da*tePay() 


dvea 七 eRe'wW) 


Cveaie a objeti -fov- 

-bo i\\t >wcb server. 


^sk -bKc scwcv -fov -bKc latest 
snov/bodv'd sales -fi^UVCS- 

Set "bV^e v>uw»bcv o-f boards sold 
av»d -tV>c tasV> iV>at ^ade 

■bo Ac wosi twrvcvrb values. 


蕭 


: m 


hM 


Work If Through- Answers 

Youye already seen two of the properties from the request object 
yve been usiMpow ifstiwe to put what youVe learned to the test. 
Pelow on the left are several properties of a request object, and oh 
the right are descriptions of these properties. See if you can match 
the property name to its purpose. 


v-es 


fonseU 


vea 


dyS-ba-bc 


owre. 




The HTTP sia-tus to&t 
vciuvftcdi ihc scwcv. 

TKc •fund-tion W tKc Wo^wsev io 
vu« 诎 cn servev b> 

youv ve^ues-t- 

/\ numbev- Aat state 

七 he vc'wcst is _m: load'w^j 
?v ■ 哼 css, ^misV^cd ^vodcssm^ cU- 


The data vcW^cd 心。坩 
scwcv m vcs)[>oif\se -bo 
youv ve'uest. 



yoi/Ve on your way 









2 Hak?Nqf A^av 

Speaking the Language 



It’s time to learn how to speak asynchronously. 

If you’re planning on writing the next killer application, you need to 
understand Ajax inside and out. In this chapter, you’ll get the inside 
scoop on asynchronous JavaScript: you’ll learn how to send 
requests on different browsers, master ready states and status 
codes, and even pick up a few extra dynamic HTML tricks along the 
way. By the time you’re done, you’ll be making requests and handling 
responses like a pro... and by the way, did we mention your users 
won’t have to wait around on you while you’re learning? 


welcome to the next level 
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introducing break neck 


Break Neck Pizza Delivery 

30-minute pizza delivery? Old skool. Try Break Neck Pizza, 
revolutionizing high speed pizza delivery through its patented “just 
in time” cooking process along with its distributed network of bicycle 
messengers. Better yet, Break Neck only takes orders via its web 
site (no human interaction required). Next time you need a pizza in 
under ten minutes, they’re the ones to call. 


Hcvc «s Nctk 
p-^s ovdcv 


\/ou 70UV dclWc^f 

m^ov-wat>oy> V>cv-c Lawc 

address, 忭 o”c). 


youv* ovdev* 

(pizia, 七 0 州呼， d). 




Break Neck Pizza Delivery 

_ I 

卜 - … 

J C + www.breakneckpizza.com/pizza.html 

_©1" Google_J 









ureaif 



Enter your name: 
Enter your address: 


Enter your phone number: 
Type your order in here: 


’ Order Pizza 



Wit "OYdtY your o\rdtY 

,s 奶七 "to ovchS ahd pv-ih-fecd ou-fe 
*fo\r "tKc bike dclivcv-y boy. 


Your pizza, just in time 
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ajax requests 


Ten minutes? I’m lucky if I can deliver a 
pizza in an hour when customers enter the 
wrong address in the order form. Can't you 
web geniuses do something about this? 



ft 



When customers submit their orders, there’s 
nothing that makes sure that their address is 
correct —— the order is just sent straight to Alex. 
If the customer makes a mistake and types his 
address incorrectly, Alex ends up at the wrong 
house, and then wastes a lot of time looking 
for the right one. On top of that, the pizza gets 
cold, and customers get angry. 

Somehow, we need to be able to get the 
customer’s correct address to Alex. But we 
can’t count on the customer to enter his 
address correctly every time. How would you 
make sure Alex gets the right address? 


you 1 re on your way ► 
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old skool web apps 


Solving the pizza delivery problem 

Fortunately, web developers have been solving these sorts of problems for years. 
Instead of letting users enter their own address (and type something incorrectly), 
let’s look up the customer’s address in the Break Neck customer database. Then, 
Alex will always get the right delivery address. Here’s what we can do: 

❶ The customer enters their phone number 

A customer enters his phone number, and the phone 
number gets sent to Break Neck’s web server. 


Customers y\umbcv 



8 0 0 


Breakneck Pizza D«lrvtrY 

http: / / mww .bfcakntcl(pi22 a.com / piiu. hcml 


Bv-cak Wdk 


s scv-vc^- 


- 


Cus-tomc/s 


o 


The server fills in the customer’s details 

The server sends back a new form, with the customer’s name, 
phone number, and address already entered into the HTML. 


Ncv/ HTML wi*th 

dus-bomcr m-fo -pilled m 




CJf/kOOilllOCtfM 



-(*OVm lids 
dus*tomCV- ； s y\\OY\t 
ar\d addv-css 
already -filled m- 


arean necii pizza 

Your pi 



The dus-tohr*cv dah make SUV-C his 
add 吧 s is Hjhi but shouldn't have 
io -type i-t ih ^hually, 3hd v-Uh ihc 
hsk d making mistakes. 


變 


? 
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ajax requests 


The customer enters their order 

With the customer’s details filled in, he can enter his pizza 
order into the form, and click “Complete Order”. 






N«ck P>22 矗 Delivery 

I //VMirM.br«Akn»ckpix/4-com/cgt-}o(Al/lool(upCuU0m«r : 


— 


arean neca 


(214) 290-67S2 


[ivereo to 


CtaiUt. 


Umm... hello? I thought this was 
an Ajax book... why aren’t we using 
asynchronous requests here? And the 
customer has to wait around while the 
server looks up his address? Thafs not 
very Break Neck! 




■ 

No kidding! 


It looks like Ajax is just 

W 

the thing to help out 


Break Neck. Let’s look 
up that address without 
making the customer 
wait around for the 
server... and solve 
Alex’s delivery woes, all 
at the same time. 


you 1 re on your way ► 
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an asynchronous approach 


Break Neck Pizza ， Ajax-style 

Instead of starting with old 1990s development ideas, let’s look at what the Break 
Neck app should do. Then you can use your new asynchronous programming skills 
to make sure Break Neck’s order form is a responsive, customer-friendly means of 
getting great pizza, fast. Here’s how things should work: 
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ajax requests 


Work It through 


Just like the boards X Us application iw Chapter I you're going to 
weed several JavaScript functions to make the Prcak Neck app work. 
Pelow on the left arc the names of two JavaScript functions, and ow 
the right are several lines of JavaScript. Praw arrows from the lines 
of code to the function each line of code should go into. 
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break neck planning 


Piagramniing the Break Neck app 

Now that you know how customers will use the Break Neck app, let’s take 
a look at what actually has to happen behind the scenes. 
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ajax requests 


Be tlie /lpcfcllect 

You’ve seen what the Break Neck order form should do, and you’ve also 
got an idea of what has to happen behind the scenes to turn Break Neck 
into a customer-friendly web app. Now it’s your turn to take charge. 

Below is the basic flow diagram for the Break Neck app. Your job is to 
add notes to this diagram, indicating what steps you need to take to turn 
this diagram into reality. Write what functions you might need to write, and 
relate them to the drawing. We’ve added a few notes of our own to help you get started, 
and given you some sample notes at the bottom to give you some ideas. 
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getting the user’s information 

Step 1 ： Get the customer’s phone number 

It looks like the first thing we need to do with the Break Neck app is make 
sure we can get the customer’s phone number. That’s going to take some 
HTML, a bit of JavaScript, and a lot of help from the web browser. 
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ajax requests 


HTML 101 ： accepting user input 

The Break Neck order form already has fields for the customer to 
enter in their phone number, address, and pizza order. Let’s take 
a quick look at the HTML for the order form, and then figure out 
how to connect this HTML to the JavaScript you’ll be writing: 
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connecting html to javascript 

Event handlers connect 
HTML to JavaScript 

Remember event handlers from Chapter 1? You used the onClick 
handler to connect a button on an HTML page to a JavaScript 
function. Let’s take a quick peek back at Chapter 1: 
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ajax requests 



Aren’t you getting a little ahead of 
things? How can we write an event 
handler if we haven’t even written a 
JavaScript function yet? 


Plan first，code later 

Sometimes, it’s better to do a little planning 
before you jump in and start writing code. In 
this case, we can go ahead and decide what 
we’ll call the JavaScript function that makes a 
request to the Break Neck server, even though 
you haven’t started coding it yet. Let’s name this 
function getCustomerlnfo (), since that’s 
exactly what the function is going to do: ask the 
server for the customer’s information. 

And now that you know the name of this 
function, you can go ahead and update 
the HTML in the Break Neck form to run 

getCustomerlnfo () when a phone number 
is entered... even though you won’t code the 
function for a few more pages. 


a^d add ^ tW»s Java^vi\>-t 

*to youv- notes. 


SpeaMiq af pbiiii q". 


Looking for answers to the Be the Architect exercise back on 
page 73? You’ll find them... throughout this entire chapter. 

As you read through the chapter, you’ll see how we decided to 
build the Break Neck Pizza order app. See how your decisions match 
up with ours, and think about how you might do things differently. 
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event handlers 

Event handler roundup 

You have lots of different ways to attach your JavaScript code to 
your HTML pages. Here are just a few of the more popular event 
handlers, and a brief review of how each works. Take a close look; 
you’ll be using one of these on the next page... 





The onChange event is triggered any time the 
value in a form field changes, like when you type 
in a new value, or clear the existing one. 
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Any JavaScript attached to the 
onFocus event is run when a 
field or other page component gets 
the focus, by tabbing into the field 
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onBlur is used to run code when a user leaves a 
field, by tabbing out of the field or by clicking on 
another form component. 
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ajax requests 


By now, you should be ready to update the Break Neck pizza form. First, 
you need to add an event handler to run the getCustomerlnfo() function 
that you’ll write in just a few pages. Remember, this function should run 
every time a customer enters a new phone number. 

Next, you need to add id attributes to the order form; you’ll need these 
later, when you want access the form’s fields in your JavaScript. While 
you’re at it，why don’t you clear the form every time it’s loaded, too? 

Below is the HTML for the current version of the web form. To update 
this form, attach the HTML and JavaScript magnets from the bottom of 
the page to the correct blanks in the markup. 

_ > 

<p> 

<img src= 〃 breakneck-logo•gif 〃 alt=^Break Neck Pizza 〃 / > 

</p> 

<form method= 〃 POST 〃 action= 〃 placeOrder•php〃> 

<p>Enter your phone number : 

<input type= 〃 text 〃 size= 〃 14 〃 name= 〃 phone 〃 

_=’’getCustomerInf o () ; / > 

</p> 

<p>Your order will be delivered to : </p> 

<p><textarea name="addi:ess" _ 

rows=’’4’’ cols="5◦’’></textarea></p> 

<p>Type your order in here : </p> 

<p><textarea name= 〃 ordei :〃 

rows=’’6" cols="5◦’’></textarea></p> 

<p><input type=’’submit’’ 

value=’’Order Pizza’’ / ></p> 

</form> 

</body> 
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Code 


Here’s how we finished off the Break Neck 
web form. Make sure your answers match ours 
before going on to the next page. 






suvc 扣 Y 七 

七 V\c 


T~his dlc3lrs "the *Piv~S"t 
•fo\rm (( O \r^sC03) irt -fehc 
HT/VJL dodumch-fe- 


<img src= 〃 breakneck — logo•gif 〃 alt=^Break Neck Pizza" / > 
</p> 

<form method= 〃 POST 〃 action= 〃 placeOrder•php〃> 

<p>Enter your phone number : 

<input t ype= 〃 text" size= 〃 14 〃 name= 〃 phone 〃 

getCustomerInfo();" /> 


</p> 



ytCusWcv-UW) <P>Your order will be deliverej^^^^^^ 

Will be v-u^. <p><textarea name=’’address" 

rows=’’4’’ cols=’’5b’’></textarea></p> 
<p>Type your order in here : </p^> 

<p><textarea name=〃order 


rows= 〃 b 〃 cols= 〃 50 A 


n c h 


id=' , order i 


<p><input type=〃submit 




value=’’Order 


’></textare^</p> 


id=" submit; 


</form> 
</body> 


HcV*C 3V*C 七 ma^ir\C*ts 七七 
>ncvc Ic-ft ovcv. 



0 ： 



fRGOUGNTUil ASKED 

eSTIONS 


I used the onBlur handler, instead of onChange. 
Wouldn’t that work also? 


•• 

fil onBlur will run whenever the customer leaves the 
phone number field, so that’s also a good option. But with 
onBlur, getCustomerlnfo () will get run even if the 
customer didn't change the phone number. onChange will only 
run when the number changes, so it's probably a better choice. 
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On to the JavaScript 

Now you’re ready to dig into some JavaScript. You know the name of 
the function that you’ll be using to get the customer’s phone number: 
getCustomerlnfo (). This function needs to send the customer’s phone 
number to Break Neck’s server, and ask for that customer’s address. 

Let’s start out with just the function name: 



function getCustomerlnfo() 


wKcV"C dll 

youir 亡 ode will go. 


o is 


TV)C Wsi tWrnj y\ttd -to d 
ttc dusWcvs ^bcv 
^vom i\st HTML 




Astlo It 



Do you think th 

zzzt ：； ,ems _ 

p^iS-ess 苦 

0n the order f 0 e 二 ：: 


Open up the examples for Head Rush Ajax that you 
downloaded from http://www.headfirstlabs.com. Go 
into the chapter02/breakneck/ folder, and you’ll find 
pizza.html. This is the Break Neck order form, but 
you need to make some changes to bring it up to 
speed. 


First, make sure the HTML matches the answers 
from the Code Magnets exercise, on page 80. 

Next, you need to add <script> tags to the <head> 
section of the HTML, just like you did for the Boards 
app back in Chapter 1. Finally, go ahead and enter 
in the empty getCustomerlnfo() function. We’ll be 
filling this function in over the next several pages. 


Be suve r^oi 

心七咖七 》1 70 U VC jot YO'AV- 
v ㈣ 你 d 吖 dated. 
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the document object model 

Use the DOM to get the phone number 

You can use the Document Object Model, or DOM, from your 
JavaScript to get the phone number that the customer entered into 
the Break Neck order form. We’ll spend a lot more time looking at 
the Document Object Model in Chapter 4. For now, just think of 
the DOM as the way you ask the web browser to get information 
from, or send information to, a web page. 
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ajax requests 


Connecting the DOM dots 

Let’s use the DOM to get the customer’s phone number. Below ， we’ve 
connected the pieces of DOM code you saw on the last page, and added 
them to the empty getCustomerlnf o () function: 

function getCustomerlnfo () { 

var phone = document • getElementBy Id (''phone") .value; 

、 r 、 

Let's sWc -the phohC This jus 七 tomb'rncs tKc fictcs o-f JavaStv-ipt you saw 

ir» d hew vdvidble- ov\ last m*to d lmc o*f 6odc. 



^licad ahd add *tKis I'mc o-f Codt 
iivto youv vcvsioh o-f pizz^.K*km|. 


TV.c HTML ? ay «s ,, 
W tV>c w d<» W 

object m v)avaW«\>t| 



looks W ay^ clcmcy^t ^ 

… wrbh a value! 
o( 'Yliorvc^. 


tire f = ’’bireakneck • cs s /> 


<html> 

<head> , 

<title>Break Neck Pizza Delivery</title> 

〈link rel= 〃 stylesheet 〃 type= 〃 text/css ; . . 〃 

〈script language:"javascript" type= 〃 text/javasenpt 、 

function getCustomer ■ 工 nfo () { 

var phone = document. getElementBy Id (''phone^) . value; 

</script> 

</head> 

rri f" alt^Break Neck Pizza" /></p> 

<p><img src =,, breakneck-logo. gii j , 

〈form method= 〃 POST 〃 action= 〃 placeOr/er.php〃> 

<p>Enter your phone number : 

‘〈input type="text" size=" 14 ; t f 。 （、〃 /> 

n ame= 〃 phone 〃 id= 〃 phone 〃 onChange="getCustomerInfo() / 

<p>Your order wi/be delivered to:</p> 

<p><textarea r^rne= ，， address ,/ rows= ,, 4 /, cols= ,, 50 ,/ id- a ress 
</textar^o></p> 

<p>Tvu^^our order in here : </p> 

-^^tarea na.e-^order^ 啊 = 〃 6 〃 cols- 50 ^ ifrW 〉 

</textarea></p> . 

<p><input type= 〃 submit 〃 value="Order Pizza" >< P> 

</form> 

</body> 

</html> 


That’s it for Step i! On to Step 2 ... 




making a request 

Step 2 ： Request the customer’s address 

Next up is sending the phone number we got in 
Step 1 to Break Neck’s web server, and asking for the 
customer’s address based on that phone number. 


蚪斷 B ⑽ k d 吟如 





I. Voull -to trtait d v-c<\ucst 
七 in ou\r jus*t like 

you did batk m 0^ 七 ev I. 


t. Ne 此 usmj -tV^c 汁 <wc 

^Umbc^r you jus-t 
七 he web -fovw, y ou sc *^ 
up a 灼 c>/ vc^cst 七 ha 七 

心 。灼 c ^umbev* as *tV>c da*t3 
•m i\\t vc<\ucst 



areatt necn Pizza 




^ /ou dah use the (request object 

io schd the dusio^c/s phohe 
—b C , {o thc B,«k Hctk 


JavaSc 



addvess usmj W»s 


Web Server 


the V/eb Browser 

Inhere W 賊 ak^ 

Is the browser involved at all in this step? If 
you think it is, add a note to this page saying 
what you think the browser does. 
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ajax requests 


getCustomerlnfoO at a glance 

You should be pretty comfortable with making a GET request after 
fixing up Katie’s Boards 4 R’ Us app back in Chapter 1. Here’s 
similar code for getCustomerlnfo (); most of this JavaScript 
should look similar to the code you wrote Chapter 1: 


TKis is 七 lie dodc h> get tKc 
pKonc numbev, using DOM ； 
七 ha 七 you y/vo*tc m S 七 cp I. 


You V/VO"tc "tWis 

C^a\>tcv I; 
dveates a v\c^i 

v-C<YACst oiojett 




TWis sets ^ 

object *to 
a 碎 T 


You’ve alvcady set ^ Bvcak Heck 
-fovm {p tall 払 is ^U^ttioyv >wKc>rvCVC\r i)nt 
^>Koy\C >r»UinnbcV* -field is C.K3^cd- 


function getCustomerlnfo() { 

var phone = document • getElementByld ( 、 'phone 〃） .value; 
createRequest (); 

var url = ''lookupCustomer .php?phone =〃 + — 

escape (phone) ; ' - -the URL 4^ 

request • open (''GET", url, true) ;^o h -fcKc 
request.onreadystatechange = updatePage; 
request.send(null) ; f 

TWis -tells i\\t Woy/scv- 
bo v-u^ 4 ⑼ 

vc'uest’s v-cadiy state Aav^cs. 


s C»rvcv-... 



丁 liis las*t Ime s ⑶ ds 七 lie 
vc^ucs-t, Wrtli no additional 
dd'bd 0 *tKc\r >wll3"t is 
m iKc v-c<\ucs*t URL. 


p::^ 






C}r as 


a 


P 扣〜毛 


Ck'. 



Say Wwaf ? 


? 




It’s OK if you’ve still got some questions about this code. 
We’re going to look at each line in detail throughout the 
chapter, so don’t feel like you have to understand it all now. 
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createRequestQ up close 


Creating a request object 

This step is all about making a request to the Break Neck server. 
For that, we need a request object that our JavaScript function can 
use. Luckily, though, you already wrote code that creates a request 
object back in Chapter 1, in the createRequest () function. 

You should remember createRequest () from Chapter 1. 

Let’s take a look at that JavaScript again, and make sure it’s ready 
to use in the Break Neck app: 



seated mside a 
仏 dW, aH youv 6 扣 use 

i\\t yc<\ucs-t vj 


the h> ? o( 

updated wi-tK -the crcaicRc^siO 
(uMtoh -Plrom Chap-fecv- I. 


Rcwcw'Idcv, 

v/c 

use dlWcwb 
toAt (or 

1dvov/scv*s- 


<html> 

< <tltle>Break Neck Pizza = " breakneck . css 〃 

<link rel="stylesheet- type=-text/css hrer 

Script language-javascript^ type-^ext/javascript > 

,vax request = null, 

function createRequest() { 

^re^uest = new XMLHttpRequest ()； 
catch (trymicrosoft) { 

tr reiuest = new ActiveXObject (''M SXm 12 .XMLHTTP ^)； 

} catch (othermicrosoft) { 

= new ActiveXObject (''Microsoft.XMLHTTP^) 

} catch (failed) { 
request = null } 

0[A]r cvrolr hcv-c r^akes 

swre ho-thihj wch-t wvohj. 

if (request == null) , . 

a lert(''Error creating request ob] ' 


/> 


卜 4 P 心錢 d 
公呻 “ Ch 咖 /. 


Polled -this dodc 

out d rts pvc-asscmblcd 
box … youVc joihj -to Icaw 
exadJy wha-t cadh lm C of 
this Java£dv-ipi does ove^ 
the hex-t -Pew pages. 


viruir^lookupCustomer .php?phone=- + escape (phone) 

request, open (''GET", url, true); 

request.onreadystatechange = updatePage; 
request.send(null); 


</script> 

</head> 
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Plans cfcange 

Remember your plans for the Break Neck app from page 73? Well, 
you’ve learned a lot since then, and now’s your chance to make a 
few changes. Flip back to your original plans, and see if there are any 
changes you might want to make... there’s still a lot of work left to do 
before we finish up with Break Neck. 

Use the space below to write updated notes about what you think needs to 
happen to ensure Break Neck crushes its competitors. If you still like what you had back 
on page 73, you can write those notes in on these plans, and give yourself a pat on the 
back for getting things right the first time. 
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creating a request object 


Supporting multiple browsers 

It’s time to break into this pre-assembled JavaScript, and figure out 
exactly what’s going on. Let’s walk through exactly what each piece 
of createRequest () does, step-by-step. 



❶ Declare a request variable 

First, we declare a new variable to represent the request object, 
so we can use that variable in the rest of our JavaScript. 


var request = null; 

RcmCmbcv ； 七 his v3vi3blc is dcdUvcd 
•m a f ujrvfi •七 ioh” i 七 , s jus*t inside 


_blc iWt Att\^td msidc 

a ^ Uhd ^ io ^ of youv JavaSdvip-t 
•PuhdiiohS tav\ use it 


❾ Try and create XMLHttpRequest for non-Microsoft browsers 

Next, we define a new function called createRequest (). 

The first thing this function does is try and create a new 
request object using the XMLHttpRequest type, which 
works on almost all browsers except Internet Explorer: 

function createRequest() { 

try { 

request = new XMLHttpRequest (); 

} catch (trymicrosoft) { 

// Try something different 
// for Microsoft 

// (check out step 3) 



iVc wah-fc ouv vc^ucs-fc 

variable -fco poih-fc at a 
JavaSdvip-t \rc«^ucsi object 


Revest wovks 

oy \ Sa-favi, P'ivcPo%, 

A/|ozj|la, av\d 你 os 七 

y\oy\-Mitvoso^-t bvov/sevs 


if (request —— null) 

alert (''Error creating XMLHttpRequest!") 

c 

M o( all out ar, CCYOY 

i\,t variable is S 七 ill null. 



l-f -fails, 
let’s tvy 
somc-tK'mj else. 
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❺ Try and create an ActiveXObject for Microsoft browsers 

In the catch block, we try to create a request object using 
one of the Microsoft-compatible types... by trying each type 
in its own try/ catch block: 


Most versions of IE 

su^ovt tWu 




try { 

request — 

new ActiveXObject ( 、 'Msxml2 .XMLHTTP") 

} catch (othermicrosoft) { ...bu-fc (or so^ youll 

try { i^ccd iKis oiKcv -type. 

request = ^ 

new ActiveXObject (''Microsoft. XMLHTTP ”）； 

} catch (failed) { request = null 



Hcirc s oum \rc^ucs-t 

variable ajaih. 




ActiveXObject I 




oVv.. 』 todt jets Kcv-c, 

is still set "to null. 


wov-ks 

咖 lmic\ry\ci Explow. 


estHe 



Now put it all together... 



Fo\r irvon-Alidv-oso-ft b\roy/scv-s 
like £a-fav-i and Fiv-c-fo%. 


var request = null; 
function createRequest() { 

try { 

request = new XMLHttpRequest(); 

} catch (trymicrosoft) { 
try { 

request = new ActiveXObject (''Msxml2 .XMLHTTP^); 

} catch (othermicrosoft) { 
try { 

request = new ActiveXObj ect (''Microsoft • XMLHTTP ”）； 
} catch (failed) { 
request = null; 


v^ARKIN^! 16 今咖七 ^ 
yviat st»ll 
⑽ Vrth 七 Wis 
6odc. l-f youVc usinj IE 
i\\t Mad, well, 

y/V\a*t tan say? 



Pov- 七 he I 妁七伙从七 

E^lovcv *fa 灼 s. 


if (request == null) 

alert (''Error creating XMLHttpRequest 



£y-v-ov 

m tasc somctiimj 
>NC»\-b >NV-0)r»5. 
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a little error handling 


po^t about bij 

户 ttuve … v/cVc still v/o^rkmj 
oy \ ybtnr'J d vc<\ucs*b *to *tV^c 
Bv-cak Nctk y/cb scvvcv. 


j^Just Po It - 

It’s time to get a taste of the browser wars for yourself. Add the 
getCustomerlnfo() and createRequest() JavaScript from the last several pages 
into your copy of pizza.html. Then, comment out the parts of createRequest() 
that create the request object for the type of browser you’re using. 

If you’re using InternetExplorer, comment out the code that deals with 
ActiveXObject; if you’re using a non-Microsoft browser, comment out the lines 
that create the XMLHttpRequest type. Now load pizza.html in your browser, and 
enter in a phone number. You should get an error message, like this: 



("W’s (h-tcv-hc-t Explovcv, 
代 pointy ah cvv-ov bcdausc 
仏 c Ach^XObjeti pavt 

o( was 

domrhCh-tcd out 
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I just tried this, and it really sucks that I had 
to enter my phone number in to find out that 
things weren’t working. CouldiVt you have told me 
that before I bothered typing my number in? 



Don’t annoy the customer! 

In the Break Neck app, customers only have to 
fill out one field before getCustomerlnfo () 
gets called, and your code tries to create a new 
request object. Then, if something’s wrong, the 
customer gets an error message. 

But imagine how annoying it would be to fill out 
an entire form, and then find out that something’s 
wrong... what a waste of time! 

It looks like we need to find a way to let users 
know about any problems much earlier... like 
before they start typing into the Break Neck form. 






Look back at Step 1 on page 88, and think about how we handled 
creating the request variable. Does this give you any ideas about how 


you could let customers know about any problems before they start 
using the Break Neck order form? 
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static javascript 



Well, we’ve got to run the createRequest() 
function somehow, right? How else can we 
create the request object? 




JavaScript doesn’t have to be in a function 

Remember how we declared the request variable, but didn’t put 
that line of code in a function? 


<head> 

<title>Break Neck Pizza Delivery</title> 


〈script language="javascript" type=’’text/javascript’’> 

var request = null; 

</script> 



</head> 


This code will vuk» au-toma-tidally 
Ach the page loads. 


Any JavaScript in your web page that’s not in a function gets run 
statically. That means that as the web browser is loading your page, 
it will automatically run any JavaScript it finds that is not in a function, 
before anyone can type into your form or click any buttons on the page. 


By tKc twe 阿 c 

•,s loaded, a ^ vahaWc, 

tailed 七 … 
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So if we move all of the code in createRequest () out of a 
function, all the code that tries to create the request object will run as 
soon as the Break Neck form loads. If there are errors, customers will 
know right away... and getCustomerlnfo () won’t need to run 
createRequest () anymore —— the request object will be ready to 
use, or the customer will have already received an error message. 



TKc vc^cs-t vav'«ablc justs Kold 
VC-to a object 




… should be foihtihj at 

o-p B \)s \ri 

object 
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暑 USt 处 It - 

Now that you’ve learned about static JavaScript, creating request objects, and 
better error handling, you need to make some more changes to pizza.html. Open 
up your HTML, and move all the code in createRequest() outside of the function, 
right after the line of JavaScript that looks like this: 


<script language="javascript" type="text/javascript"> 


var request = null; 



</script> 


All the todt -that is ih 

^aicR^siO should go hcvc. 


Next, remove the createRequest() function altogether, and also remove the line 
in getCustomerlnfo() that ran the createRequest() function. You can test your 
changes by commenting out the JavaScript that creates a request object for 
the type of browser you’re using. If there are any errors, they should show up 
immediately, before you get a chance to use the Break Neck order form. Once 
you’re done testing, remove all your comments, and make sure pizza.html runs on 
both Microsoft and non-Microsoft browsers. Save your changes, and you’re ready 
to turn the page. 


cvvovs yt v-c\>ovtcd 
bcW ov-dev cvev 

yts loaded. MW betw! 




IB iWis 

c 叶 0<r ov 饮 a bl 如 k 

P a 3 c “ 一 c i 乇 
loaded all 
^ WTAJL yd 


fRGOUGNTUzl ASKED 


j£STIONS 


So the browser runs any JavaScript that’s not in a 
function before the HTML in the page is displayed? 


And tell me again why we have to use ActiveXObject 
to make Break Neck work on Internet Explorer? 


Al Any JavaScript that's in the <head> section of your 
HTML will get run before the page loads. However, you can insert 
JavaScript anywhere in an HTML page... even between elements 
like <p> or <f orm> in the middle of the page. JavaScript in 
those sections runs when the browser gets to that part of the 
page. But, all static JavaScript will get run before anyone can 
actually use your page, and that’s what’s important here. 


ii. Remember the browser wars? It’s still common to have 
the same object called different things in different browsers. 
Fortunately, Internet Explorer 7.0 is supposed to move to a 
standard naming scheme, and replace their ActiveXObject 
object with a new object, called XMLHttpRequest. Of 
course, you’ll still have to support those older versions of Internet 
Explorer, so your code won’t change too much. 
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talking to the server 

Back to getCustomerlnfoO 

With the request object taken care of, let’s get back 
to coding getCustomerlnfo (). Remember 
where we left this function? 


function getCustomerlnfo() { 



6iet vid of 
*tKis I'mc - >r\o>M 
ou\r v-c^ucs-t 

objcti is 
tv-caicd 
•m static 

七 . 


var phone = document • getElementByld ( 、、 phone〃) .value/ 
-eifcatcRcqucGt (); — 


var url = ''lookupCustomer • php?phone=” - 

escape(phone); 

request • open (''GET’’ ， url, true); 
request.onreadystatechange = updatePage; 
request.send(null); 


7~his is dodc you 
wotc badk i h £i cf> I 

3 啪嗔 


Talking to the server-side guys 

Here’s what we need to have the server-side 
guys take care of for us: 
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① Create a new PHP script to lookup a customer's 
address based oki their phone number: 

® Name the script !ookupCustower:php. 

⑧ Figure out how the script will accept the 
customer's phone number. 

④ Make sure the script doesn't return any 
HTML... we just want the customer's address. 


Chapter 2 



Pvdv/ d 

o-f these -fouv* *to 

s-tatcw'cnt m Team C^a*t 
oyv i\\t \>ajc wWiA deals 

wi-tK 七 ha 七 — 七 . 
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Break Neck’s PHP script 

Let’s ask Frank over in the server-side group to write us a PHP script to 
look up customer addresses. Then you can send the customer’s phone 
number to this script, and get the customer’s address as a response. 


Team Chat: Getting Some PHP Help 




Jim 




Jim 


0 


Jim 


Hey, Frank, you're good with PHP, right? 


Yeah, sure. What do you need? 


I’ve got a customer’s phone number from an order 
form.You think you could write a script that gives me 
that customer’s address based on their number? 


1 ^^ 

L 

Frank 


Sure, just send over the phone number as a request 
parameter. You want me to return their information 
as part of a new HTML page? 


No, I’m making an asynchronous request, so I won’t 
need anything but the raw data... 


Frank 


...then I can use JavaScript to update my HTML on the fly. 


It_ 

In the book’s examples, look in the chapter02/breakneck directory, 
and find the lookupCustomer.php script. This is a PHP script that will 
run without a database server; keep this file on your computer, or 
FTP it to your web site — you’ll be using it in just a sec. 
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looking up a customer^ address 


pgp …— 


Rcmcmbcv, you don ’ 七 need *to 
u^dev-standi all tKis PttP... 七 his is 
\us 七 -fov bonus dvedit 


^ all s ^ hd ^ d 
Uasc tod,. 


Here’s the script that Frank wrote to take a phone number from the 
order form, and look up a customer’s address: 

<?php 

// Connect to database 

$conn = @mysql 一 connect (''mysql • headfirstlabs • com ”， 

''secret” ， ''really-secret^) 

if (!$conn) 

die (''Error connecting to MySQL : . mysql error ()); 


if (!mysql 一 select_db (''headfirst’’ ， $conn)) 

die (''Error selecting Head First database : . mysql error ()); 


$phone : 
$select 
$f rom 
$where 


preg—replace (、'/[ \ • \ (\) \- ] l r, , 

: 'SELECT 

=' FROM hraj_breakneck A ; 

WHERE phone = \' ' . $phone /， 




REQUEST['phone ']); 々 

This bi"t o-p Code 


$queryResult = @mysql query($select . $from . $where) 
if (!$queryResult) 

die('Error retrieving customer from the database .') 

while ($row = mysql fetch_array($queryResult)) { 

echo $row[ 'name f ] . 、 '\n". 

$row['streetl/] . 、 '\n" . ^ 

$row['city, ] •、','、• 

$row['state f ] •、'、'• 

$row['zipCode']; 

} 



removes aK»y special 
dhav-ad-tev-s, like 

u (vr, a 義 ？. 

;ihc pho hc 

you s^i as 
P 釙乇 d ^ »rc^u C si 
hc looks up 

dusio ^s add^ss... 


mysql close($conn); 


?> 


...dv^d cdV^ocs *tV>c 
address batk *to *tV>c 
^ccyucstmj yoyam. 


决 TKc vcvsioirv o-f lookupCus*torwcv pKp irv 七 lie 
examples use a database ； and just v-c-tuyns a 

vandom addhress, so you dor/*t need My£6JL vunnmg 
b> Bv-cak Ncdk y/o\rkir\J oy\ you\r own domputev-. 
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Team Chat: Sending the Phone Number 



Jim 



Jim 


OK, I understand how we're getting the customer’s phone number... 


...and I get that the first part of that request URL is the PHP script we’re 
calling. But how do we send the script the customer’s phone number? 
You said something about request parameters? 



Yeah, you can add a name/value pair to your request URL, 
and my PHP script can read the phone number from that. 


f^i 

Frank 


Oh, right, we can just tack that parameter onto the URL, can’t we? 


This is 七 he strip 七 Mme; you VC 
alv-cady 30-t -tKis part dovm to\A 


Use a w ? w h> sepav-ate 七 he 
sdv-ip*t -fv-om any pav-amc*tc\rs. 



Hieh jive 3 hdme -to -fcKc 
pavamc-tcv, like w fKor»c w ... 


funct 

var phone 


(214) 290-8762 


phone’’ ） .val^e; 


tUS-bomCV"^ ^V\Oir\C 

number -fv-om ttc 

ovdev- -foV"r»\ 


var url = ''lookupCustomer.php?phone= A, + escape (phone) 

req 声 st • open (''GET’’ ， url r true); 
re/uest.onreadystatechange = updatePage; 
request.send(null); 


\ 


Wsir>j csdapcO -fuhd-tioh makes suv-e 
r»ohc o( -tKc tvidky dKavad-tcvs ih iKc 


l/\/cVc request 

URL m a JavaStv-ip-t variable. 


⑽你 dausc Problems (ov tKc y/cb 
bvoww V/Kch i-t sends iWis vc^ucsi 
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request urls 


Request URLs deliver data to the server 


The simple little request URL in getCustomerlnfo () has a lot 
of responsibility. Let’s take a closer look, and see exactly what that 
request URL is doing: 


TV^c deplete vc^cst URU 


几 c symbol -tells -the wwthat 

ahythi^ a c ? should be 
passed oh -to -the ia^ci o( -the URL. 



£iy\^C *tiiCV"C ； s y\o dom 3 m y\ 3 mC m 七 he 
URU i\\t 代 quest au-tomaiitally joes -to 
{he same scv-vcv- i\\ai i\\t v/clo v/as 
sewed *(Vom - 3vc3k Kctk v/cb sewev 


TKc 


scv-vcv 


-fijuircs ou-fe ev^dily y/Kat 
\i sKould sc^d 七仏 

usih 3 七 4 pair-t o( -tKc URL. 


Remember 七 lie sc\rvc\r passes 
ov\ cvciry-tli'mj a-ftev- 七 lie w ?" 
bo 七 he y^oyrdrrx mdida 七 ed m 
七 he v-c^ucsi URL. 



Pmally, tKc sdvift 

uses *tKc m-fovmatioh 
•m iKc vc«\ucsi 
*bo look up *t^C 
dus-fcomc^s dddv'Css. 




TV^is data «s sc^t or^ -to PHP s ^»?^ T ^ c 
W lt s use ^ value 

lookup tv>c 6 usW^ ，s addvess. 


^ W ^i P i harhcd 
lookupCus^orhCV-.php. 


CusWcv- Addvess 
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Po It - 

Now that you’ve got the request URL figured out, you can initialize a connection using 
the request object’s open () method. You should remember how the open () method 
works from Chapter 1. Below is the line of JavaScript that initializes a connection, with 
each parameter you give to open () on a separate line. In each blank, write in what the 
parameter for that line tells the request object to do. 

request.open( 

''GET", _ 

url, _ 

true _ 


living instructions to the browser 


Next we need to tell the browser what to do when it gets a response from the server. Remember, 
the browser will run the function we tell it about every time the ready state changes. 


function getCustomerlnfo() { 


var phone = document • getElementByld (''phone” ） .value; 
var url = ''lookupCustomer.php?phone =〃 + escape (phone); 
request. open (''GET", url f true); 


request.onreadystatechange = updatePage; 



request.send(null); 


Be suve Y ou 

tallma s C y,dO, so tKc 

do y/Kcr. \i yts a 


Heve’s *tKc o-P -tKc 

"tha 七 *tKc b\roy/sc\r should 


\OY\ 


y/hchcvcv- iKc veady state o-f 
objedi dlidhjes. 
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just ask us 


LI: If we aren^ calling 
createRequest() in our 
getCustomerlnfo() method anymore, 
how can we be sure that there’s a 
request object available? 

fil Remember, all the JavaScript 
code that creates the request object is 
run statically, before the browser lets 
customers start entering information in 
the order form. If there are problems, 
the browser will display an error to the 
customer. 

By the time getCustomerlnfo () 
is called, the request object has been 
created and is available through the 
request variable, or the customer will 
already know there's a problem. So all 
you need to do in your code is use the t 
variable. 


IfRGOUGNTUil ASKED 

QUESTIONS 

LI: Why are we sending the phone 
number as part of the URL? Couldn’t 
we use the send() method to pass the 
phone number on to the PHP script on 
the server? 

Al You can definitely use the send0 
method to pass data to a server, but that 
requires using the POST method for your 
request, as well as specifying a content 
type for your data. Then you’ll need to 
format your request as a name/value pair 
in the send () method. If that sounds 
like a lot of extra work just to send a 
simple phone number, then you're right! 
For the Break Neck order form, it's much 
easier to use a GET request, and simply 
add the phone number onto the request 
URL. That way, you don’t need to worry 
about POST requests or content types. 
And since you're passing the phone 
number along as part of the request URL, 
you pass null to request, send(), 
just like you did in Chapter 1. 

Remember, POST requests are usually 
best for sensitive data like a credit card, 
or requests that involve a lot of data. 

Well revisit POST requests and more 
interesting uses of send () when we 
look at XML requests and responses in 
Chapter 5. 


Can you tell me a little bit more 
about these “tricky characters” that 
we need to worry about in the request 
URL’s phone parameter? 

AI Sure. Think about a typical phone 
number, like “(214) 290-8762". In addition 
to the numbers, dash, and parentheses 
in the entry, there are also spaces. When 
the request object sends this data to the 
web server, it uses a request URL; it's the 
same as if you typed that URL right into 
the address line of your web browser. 

But if you try and enter spaces as part 
of a URL in a web browser, you're going 
to get errors, or part of your URL will be 
ignored. The request object has the same 
problem. The JavaScript escape () 
function solves this problem, by replacing 
characters like a space with something 
that will work as part of a request URL. 

For example, escape () replaces your 
space character with %20. Scripts and 
server-side programs know when they see 
%20 to convert that back to a space, so 
your data gets sent correctly. 
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Send the request to the server 

All that’s left to complete this step is to actually send the request. 

This is a piece of cake, as you saw in Chapter 1. Let’s look at the last 

line of getCustomerlnfo () now: 


function getCustomerlnfo() { 

var phone = document. getElementByld (''phone^) . value; 
var url = ''lookupCustomer. php?phone =,/ + escape (phone) 
request. open (''GET% url A true); 
request.onreadystatechange = updatePage; ^ — ^ 


request.send(null) 





This schds -feKc -fco iK 

B\rcak /Vcdk y/cb 


t 


scvvcv. 


s 伙七七 he dus-tomcv-'s y\\oY\t 
as v-c«\ucs-t 

URL, so >wc (W 七 -to sc^a any 

ottcv data -to 


you sci up 
^ovjsc^t io ^ Uh whch 

^ ^dy siaic 〜 s 

^11 s Ch dO. 


So rm still waiting to find out more 
about when that ready state changes. 



Make sure you’re keeping your version of pizza.html up to date. 
Open up pizza.html, and add the getCustomerlnfo() function if 
you haven’t already. You should also have lookupCustomer.php 
in the same directory as your pizza.html and breakneck.css files. 
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a conversation with web browser 




HeadRush： We’re here today with the ever-popular Web Browser. Browser, we’ve 
been really looking forward to talking with you today. 

Web Browser： Thanks for having me, HeadRush. 

HeadRush： Let’s begin by talking about requests and ready states. We get more 
questions on that topic than almost anything else these days. 



Web Browser： Sure, I 5 d love to talk about that. In fact, ready states are one of the few areas where people 
actually notice me. Most of the time, everyone would rather talk about JavaScript and PHP. 


HeadRush： Well, those are awfully important programming languages... 

Web Browser： Sure, sure, but what good is JavaScript without me and Callback? I mean, without us, 
JavaScript is just a bunch of funny looking lines of text. 

HeadRush： Wait a second... Callback? Who’s that? I’m not really familiar with that term. 

Web Browser： Callback? Oh, I bet you’ve heard of him, and just don’t realize it. You know that function 
I’m supposed to run whenever a request’s ready state changes? 

HeadRush： Yeah, that’s the one you assign to the request object’s onreadystatechange property, right? 

Web Browser： Exactly. Well, that’s Callback. He’s a special type of function: a callback function. But I 
usually just say, “Callback!”，and he comes running. 

HeadRush： OK, I’m with you. Callback... because you call him back? 

Web Browser： Yes, you’ve got the idea now. I find out that something’s happened with the request, and I 
“call back” that function. Then he can take care of all the details of handling the server’s response. 


HeadRush： So once you call back the ... err ... callback, then you’re done? 

Web Browser： No, not at all. In fact, I have to give Callback a holler several times for a typical request. 
And not only that, but I make sure he knows about anything the server said. 


HeadRush： Oh, right, by using the request object. 

Web Browser： Yup, you’ve got it down. I use the responseText property to let Callback know what the 
server said. I take care of the responseXML property, too, but I think that might be another chapter... 


HeadRush： Yes, we’re not quite there yet, but we’ll get to that later. So when a callback function runs, it 
can get the server’s response by using the responseText property? 

Web Browser： Wait a second there... you’re forgetting about something. I let Callback know every time 
something goes on in the request, not just when I’ve got a response. Callback knows better than to just use 
the request object without making sure the request is finished up. Otherwise, we’d end up in a big mess. 

HeadRush： Because the server isn’t done with the request... 

Web Browser： ...and I haven’t put the server’s response into the request object. Speaking of which, I’ve 
got to take care of a ready state changing right now. Gotta run... cya later! 
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Step 3 ： Retrieve the customer’s address 

In this step, we need to use the address that the Break Neck PHP 
script will return in response to the request we made in Step 2. 

Then, we can have the browser run a JavaScript function once 
it has a response from the Break Neck server, and pass along the 
address from the script. 


0 y\ h> the s-tcp m 

dodmg Bv-cak Nedc 



TKc Bircak PHP sdv-ipt looks 
U P dus-tomcir by his pKohe 


a^d vctuv-hs his address. 


L .. > s WoW 从 at y 衫 

Rc 丄 w 铷一 TW 

3 七“麵 





Customers /\dd\rcss 





Web Server 



^cvcs Y/V^cvc ttc browser 
70 UV 6 allba 6 k Uth< 


*^ C II -to w\ri-tc -this JavaSd^-ip-t 

li Jet the sewA 
vespow -Pirom -the merest obje^-t yc 

⑽ ted b 沉 k ih £-tcp Z. 


TK^ biowser runs jour caUbac]^ function eveiy 伽 e 
也 e ready state of jour request object cfianges. 


you J re on your way ► 


103 


















































http ready states 




BreaH iiech pizza 




Under the Microscope ： 

HTTP Ready States 

So when exactly does the ready state of a request 
change? Here’s a close-up look at the ready state 
of a request, and how it changes as a request is 
processed by a web server. 
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ready states and callback functions 




So thafs why we check to make sure the ready state 
is 4 before doing anything in our callback function, 
right? Otherwise, our JavaScript might try and 
update the page before the server is finished. 



M 

Right — because updatePage() runs 
flliitt' every time the ready state changes. 

As long as you remember the name of the 
|v property you use to set the callback function, 

you’ll remember that the callback is run more 
than one time. Do you remember what the 
property was called? 



It’s onreadystatechange. So when the 
ready state changes from 1 to 2, for example, 
your callback function, updatePage (), gets 
run. In other words, updatePage () will run 
several times: when the ready state changes from 
1 to 2, when it changes again from 2 to 3, and 
one more time, when the ready state changes 
from 3 to 4. 


But the server only guarantees that it’s got data 
you can use when the ready state is 4. So you 
need to check the current ready state before 
trying to update the order form, or the page 
might end up with bad or missing data. 
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Checking the ready state 

Now that you’ve got getCustomerlnfo () working, and the 
browser knows to call updatePage () when the request’s ready state 
changes, it’s time to write the callback function for the Break Neck 
app. Let’s start out by checking that ready state, and making sure the 
request has been completed before doing anything to the HTML. 

Add a new function to your pizza. html file, called 
updatePage (), and start with this code: 
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FRGOUGNTUzl ASKED 

STIONS 


How does the server run the callback function when 
the ready state changes? I didn’t think the server could call 
JavaScript code that’s in an HTML page. 

AI You’re right".it’s the browser that actually runs the callback 
function. When the server is done with a request, it lets the 
browser know. At that point, the server’s finished, and it’s the 
browser’s job to figure out what to do next. The browser looks 
up the function specified in the onreadystatechange 
property of the request object, and calls that function. So it’s the 
browser running your JavaScript code, not the server. 


LI I Will we ever need to write code that does something 
when the ready state isn f t 4? 

Al Not very often. Remember, these are asynchronous 
requests, so your users aren’t waiting around on the server, 
and don’t really need to know what state the request is in. You’ll 
usually code your callback to only take action when the server is 
finished with the request, and the ready state is 4. 
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the browser and ready states 

What is the browser doing? 

You’ve seen what the Break Neck server is doing, and you’re 
written a lot of new JavaScript, but what’s the browser doing as 
all these ready states are changing? 

Let’s take a look and find out: 
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Tke browser makes a servers response 
available to your code tkrougk tke 

JavaScript request object. 














































ajax requests 


Get the server’s response from the request object 

If the ready state is “4”， the browser will have put the server’s response in the 
request object’s responseText property: 



function updatePage() { 

if (request.readyState == 4) { 

/* Get the response from the server 


★ 


var customerAddress = request.responseText; 


/* Update the HTML web form * 


丁 1 化 b\rowsc\r will sio^c ihc 

ih -tKc 

WpohseTcx-t pv-opcv-ty. 


Blueprints, retflslfecl 

You haven’t fogotten about the diagram and notes you drew up for developing 
the Break Neck application, have you? Take a moment to look back at what 
you wrote down on pages 73, and see how that compares to the steps 
we’ve taken so far. This is your chance to make a few more changes before 
we hit the home stretch. 

In the space below, write down what you think still needs to happen to 
complete the Break Neck application. 
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revisiting the document object model 

Step 4 ： Update the order form 

Once you’ve got the customer’s address, you need to update 
the pizza order form. You’ll need the browser again, as well 
as some help from the Document Object Model. 
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Finishing off the callback -Function 

With the address from the server, all that’s left is to update the web 
form. Since the address is stored in a form field, you can use the 
DOM again, similar to how you got the value of the phone number 
field in getCustomerlnfo () way back on page 82. 


y/Kcv-c 
those id 
attributes dowte 
•… Ka^dy a^a\y\. 


function updatePage() { 

if (request.readyState == 4) { 

/* Get the response from the server */ 
var customerAddress = request.responseText; 

/* Update the HTML web form */ 


document. getElementByld (''address") • value 
jl customer Address 
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FRGOUGNTUzl ASKED 

U£STIONS 


LI: Why don’t we have to use that JavaScript utility file 
from Chapter 1 to update the address field? 


GI Couldn’t we just use a <div> for the customer’s 
address? Why are we using a field, anyway? 


A: In Chapter 1, we were updating the text in a <span> 
element. Since <span> isn’t an HTML element that you usually 
type in, it doesn’t have a value property; the same is true for 
most other HTML elements, like <p>, <em>, and <div>. 

For form fields, though, you usually do need to enter a value. 

To make that easier, you can just use the value property on a 
form field element, and get and set its text value directly. 


Al Even though the Break Neck server looks up the 
customer’s address, there are times when a customer might 
want their pizza delivered to some other address (like for that 
big Super Bowl party). So the customer’s address is filled in for 
them, but they can still enter a different address if they want. 

Don’t worry, though—we’re going to talk about <span>, 
<div>, and updating your HTML a lot more in Chapter 4. 
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test drive 


Test driving the Break Neck app 

Make sure you’ve added all the JavaScript we’ve talked about into pizza. html. 
Then, open up the page in your web browser, and enter in a phone number. It 
looks like everything is working! The server answers your request, and fills in the 
form with your address from the customer database. 
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changing the user interface 




、 


sreaw necw pizza 


I was typing in my address before 
updatePage() got a response and filled it 
in. That seems sort of confusing... and 
annoying! CaiVt we fix that? 



Order matters in asynchronous apps 

When you’re writing synchronous 
applications, you can usually put your fields 
on a form in whatever order you like. But for 
synchronous applications like Break Neck, 
you’re going to have to think a little harder 
about how your form should look. 

In the Break Neck order form, you probably 
don’t want customers to start entering their 
address, and then have your callback function 
overwrite that with the address from the 
server. Instead, let’s re-order the form, so 
customers go from the phone number field to 
the order field. That way，customers can start 
entering their pizza order while their address 
is being looked up. 
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And what about that Windows problem from 
back in Chapter 1? bon't we need to fix that 
so Break Neck runs on Macs and PCs? 


What’s going on in Windows? 

Internet Explorer is a pretty smart browser, 
and tries to do lots of things to help make your 
browsing a better and faster experience. For 
instance, it will cache a lot of your images, so if 
you visit a page with lots of graphics, and then 
come back later, you’ll see the graphics come up 
really quickly. 

IE tries to do something similar with URLs. If 
you make a request to a server-side program, IE 
keeps track of the URL you requested. Then, if 
you make a request to the same URL — without 



any different data —— IE figures you’re going to 
get the same response. So, instead of re-sending 
the request, it just gives you the result from the 
first time you made the request. 

Since we first saw this problem in the Boards 
Us app, let’s start by fixing that app on 
Windows. Then, we can take what we learned 
and fix up Break Neck Pizza, too. 




Uc s 〜 , docs 





r hy would Internet Explorer’s and Opera’s caching of requests cause a 
roblern in the Boards ‘R’ Us application? Will this also create trouble for 


customers using the Break Neck pizza order form? And what should we 
do to try and fix this problem? 
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/e, opera, and caching 


When browsers cache request URLs … 

Let’s take a closer look at exactly what browsers like Internet Explorer and Opera are 
doing, and figure out why that creates trouble for our asynchronous apps. 


① Your code makes a request to a web server 

Most Ajax apps start by running a JavaScript function based on 
an event (like a phone number being entered in). The JavaScript 
builds a request URL, and sends a request to that URL 
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PHP script 


② The server sends back a response 


When a response is sent back to the browser, the callback 
function you specified is run. But, if the browser is caching 
request URLs, it takes a note of the URL, and the answer from 
the server, and saves those two values for later. 
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(D 





㈣ —幻一 s 广 

YovaVc a V^cvo! 


YooVe got a dynamic application! 

Your JavaScript callback function can update the web page with 
new values based on the server’s response, all without having to 
submit any forms or redraw the page. 


④ Your code makes another request to the web server 

Since everyone loves your app, it gets a lot of repeat use. So 
in the Boards app, Katie’s boyfriend clicks the “Show Me the 
Money” button a second time. 
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⑤ The browser gives your code a response 


The browser sees that it already has an answer for the request 
URL you supplied, so it figures it can save you some time. 

Instead of sending the response to the server, it gives you the 
response it has in its caching table. 

The browse thmks Kclpi ^ you .. 
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YooVe got a crappy application! 

Suddenly, your dynamic application is returning the same data, 
over and over. Your callback is getting stale data from the server, 
and your web page isn’t getting updated with fresh information. 
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working around caching 


So to get around the caching, we have to 
change our request URL every time. But... if 
were talking to the same script, and were 
not sending in data in the Boards app, how 
can we make the URL different? 




Sometimes it takes a hack... 

The browser doesn’t care how the request URL 
is different; it just cares that it’s different. So, we 
can add a dummy parameter onto the request 
URL, and give it a different value every time 
we send the request. And, since we don’t want 
to write a random number generator, or do any 
extra work, we can just grab the current time (in 
seconds), and add that to the request URL. 

Let’s take a look at how we can fix up 

getBoardsSold () from Chapter 1 : 


TWis 私 vst Ime sets the 
URL ^ov-mally, 
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value bo URL- 


function getBoardsSold() { 

createRequest () ; <:_ 

var url = ''getUpdatedBoardSales-ajax.php 


badk i h ihc 

old days, when o\A\r 

object was 
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url = url + ''?dummy + new Date () . getTime () 


request • open ( 、、 GET", url, true); 

request.onreadystatechange = updatePage; 

request.send(null); 


dur^rhy 

paamet 饮 has 

■the dunrehi tirhC 
^ ifc v^lue. 


Now the request URL changes. 
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^^Just Po It 

Go back to your copy of boards . html, from the Chapter 1 examples, and update 
the getBoardsSold () function. Try your new version of the Boards app out on 
Windows using Internet Explorer, or on Opera (on the Mac or Windows). Do you have 
any problems with caching using this new version? 



fRGOUGNTUzl ASKED 

QUESTIONS 


LI 二 Can’t I just turn off caching in my browser, and 
avoid all this extra code? 

AI No, most of the options you have in your browser 
control caching of pages you directly load, by either 
typing a URL in the address bar or clicking a hyperlink 
on a web page. The requests that your JavaScript make 
are behind the scenes, and IE and Opera don’t give you 
much control over how they handle those requests. 

And even if you could turn off caching, many of your 
users will still have caching on in their browser. So you’ve 
got to work around caching, even if you can turn it off on 
your own web browser. 


Won’t there still be a problem if two requests 
are made within the same minute? The time would be 
the same for both requests then, right? 

Al No, getTime () returns the time elapsed 
since January 1st, 1970, and it returns that time in 
milliseconds. So unless you can manage to click “Show 
Me the Money” twice in the same millisecond, the r 
equest URL will be different each time. 

LI 二 What happens to the dummy parameter when 
the PHP script receives the request? 


G 二 So just by sticking that “dummy” parameter on 
the end, I can get around caching? 


Al Nothing. The PHP script doesn’t need that 
parameter, so it just ignores it. 


AI It’s more than just the parameter, or the name 
of the parameter. It's changing the request URL itself. 
We used the name “dummy” to make it clear that the 
parameter isn’t pointing to any data that’s important 
to the application, but you could use any name for the 
parameter that you wanted to. 


So now we just need to make this same change 
to getCustomerlnfo() in pizza.html? 

Al That’s not a bad idea... is it? Turn the page and 
let’s talk about that some more. 
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caching and break neck pizza 


I don’t think we dotVt need to worry about caching in 
the Break Neck app. If the phone number is different, 
the request URL will be different. And if ifs the same 
phone number, we don’t need fresh data from the 
server; the customers address is the same each time. 



Good thinking! 

^ You don’t always need to worry about caching. 

In the Break Neck app, the request URL will be 
unique for each phone number, so there won’t 
I be any caching problems there. 

I If a customer enters the same phone number, 

caching probably would keep the request from 
going to the Break Neck server... but in that 
case, the server really would be returning the 
same customer data —— the customer’s address —— 




each time. So in that situation, caching actually 
saves your customer’s time. 

Be sure you don’t end up adding code that you 
don’t need to your applications. In the Break 
Neck app, there’s no need to make any changes 


to the code you’ve already got. 

V 
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Step 5 ： Place the customer’s pizza order 

The customer enters their order into the form, and they’ll see their 
address filled in, Ajax style, by the JavaScript function you wrote in Step 4. 

All that’s left is to let the user submit his order, and get the pizza cooking. 
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arEan necu Pizza 

_ 「 Your pizza, just 


jst in.time 


E nter your phone numbof: 
Your order will bo dolivorod to: 


M»ry 

?Otl TeAU«ooo #24C 
T«iu» 7S1I2 


Typo your ordor in hero: 



1 

I i Ofdtr o< Ir«a4 SOOu 
.?-Uicr Docitt of l>t% CoU 


如 order ahd 

delivery address, 
"the 

dkk "OYdtY Pi2ia w 



Ajax? No, I have no idea what 
that is. But if ifs what got my 
pizza here so fast, I'm all for it. 




TV\c sewev yy^cv-atcs d 
dclWcvy order (or h^> ^ 
yb "tV\c 6oolc”. 


丁 he dus ^ rh ^ y - 

ordeir fds-i, bcdausc f\\t% 

hew ihc Hjht addv-css to 
deliver -the piz^a "to. 


jets Kis 

M 
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submitting forms is still cool 


Back to Break Neck’s order form 

With all the JavaScript sorted out, let’s get back to the pizza 
order form. Once the customer enters their phone number, 
types in their pizza order, and verifies their address, all that’s 
left is to send the order to Break Neck. 



0 O O Break Neck Pizza Delivery 

0 http://www.headfirstlabs.eom/books/hrajax/chapter02/b * Google 


Breaw 

/ (' Your pizza- j ust\ rft ； time 


Enter your phone number: ( 214 ) 290-8762 
Type your order in here: 


1 Large Cheese Pizza 
1 order of Bread Sticks 
1 2-liter bottle of Diet Coke 


Your order will be delivered to: 


Mary Jenkins 
7081 Teakwood #24C 
Dallas, Texas 75182 


’Order Pizza 、 


Youvc alvcady 50-t \>av-t 
dowe …七 ^ tus-tomcv tav\ 

七 Wiv ovdev- bo Bv-cak 
Neck’s sewevs by 

w 0vdcv P'iz^ W 


So I hear were ready to start 
taking order again... I sure 
hope this works! 
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ajax requests 


The final test drive 
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the wrapup 


I think ifs time to quit delivering pizzas and 
start writing Ajax apps. This asynchronous 
programming stuff is sweet! I bet I could even 
program an app to make my morning coffee. 




60 Second Review 




■ 


■ 


■ 


■ 


■ 


For Microsoft browsers, the Ajax request 
object is ActiveXObject, using either 
Msxml2.XMLHTTP or Microsoft.XMLHTTP 
as the type of the object. 

For non-Microsoft browsers, including 
FireFox, Safari, and Opera, the Ajax request 
object is XMLHttpRequest. 

Static JavaScript is JavaScript that is not in 
a function, and is run by the browser when it 
loads your page. 

You can use static JavaScript to make sure 
certain pieces of code run before users start 
working with your web page. 

A request’s ready state indicates what 
is happening with the request: whether 
it’s being initialized, the server has been 
contacted, the server is finished, etc. 


■ 


■ 


■ 


■ 


■ 


When the ready state of a request is “4”， the 
server has finished processing the request, 
and any response data is safe to use. 

Every time a request’s ready state changes, 
the callback function registered with the 
request is run by the web browser. 

You need to use the DOM to update the text 
in HTML display elements like <div> and 
<span>; you can use the value property 
to set the text of form field elements like 

〈 input〉and <textarea>. 

Make sure the ordering of your fields works 
with your application’s JavaScript, and not 

against it, to help avoid confusing your users. 

You need to use a different request URL 
for each request to work around caching 
browsers like Opera and Internet Explorer. 
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ajax requests 


Exercise 
Solutions 



Work It through 


Just like the Poards Us application in Chapter i you're going 
to need several JavaScript functions to make the Preak Neck 
application work. Now ow the left are the names of two JavaScript 
functions, and on the right are several lines of JavaScript. Praw 
arrows from the lines of code to the function each line will go into. 


^C*tCuS*tomCV"| h-foO 


^da*bcPa^cO 


VC 


c^ucs*t.scr>d(r>ull )； 


i-f (vee^west.'readYS'tate 二二 午） 

vc^ucs*t-opcr\( w ^ET W > uvl, *brue); 
o^t^oY\rtad^siaitc\\av\^t =• upda-tcPa^c ； 


va\r 灼 e 二 

ao^umC^t3C*t&Cm^*tBYla(>V)OnC W ).valuC ； 


•,jf (vecyud*t3 七 us 


2»00)( 


i. 


you 1 re on your way ► 125 












TOP 

SECRET 


Eyes Only 

duplication strictly prohibited 









welcome to chaos 




Congratulations! Your wealth of experience and expertise in 
building web applications have made you a prime candidate for 
P4While the world sleeps on 
oblivious to our work, we are the men and women who ensure that 
faulty code will always keep programmers awake late at night, that 
moonlit walks by the beach will be interrupted by the ring of a cell 
phone, and that evenings started with a rose and a kiss end at the 
office, rather than in the bedroom. 


We have determined that the Break Neck Pizza order form’s 
interactivity could provide unprecedented levels of customer 
satisfaction, and greatly reduce the frustration of pizza lovers 
throughout this region of the world. Further, the application’s 
asynchrony could catch on, turning the Internet into a 
dynamic, user-friendly place for browsing. This is simply not 
acceptable! 

To receive your assignment, and understand how you can aid 
in combatting the rise of these “next generation” applications, 
you are to be sitting at a table for two, at precisely 10:14 
PM, in your local Starbuzz Coffee Shop. Place a blue 
feather between the pages of a paperback copy of Neal 
Stephenson’s “Snow Crash”. 
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丁 he ^apkiir> Kahdcd -to you by -the 
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a hidden error 


Problems at Break Neck … 

It seems that something is going wrong with the Break 
Neck app. Try opening pizza. html up in your browser, 
and enter a phone number. What happens? 


0 O O 4 Break Neck Pizza Delivery - Opera 8.S 



/ \ 

Obviously, the Break Neck app failed 

because ... someone ... changed the request 
URL to be invalid. But why didn't the browser 
tell us something went wrong with our request? 
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Checking the requests status 


Even though you probably didn’t realize it, the browser did try to tell you 
something went wrong. The browser uses a property of your request object, 
called status, that you can use to determine whether something went wrong. 


Here’s how you can check the status of a request: 



Vou^c seen mos*t o-f this todt 
m Chap 七饮 Z … 七 his is 七 he 
ufdatcPagcO dallbadk -fuwdtiov\. 


The 


schds a 


function updatePage () 


Hcvcs a ^ 

vc^cst object- 
|t vc\>ov-bs tV^c 
s-tat'AS toAt 
^vow "bV^c sewev*- 



抓 J ^lOO il whch 

cvc»ryihih3 is OK. 


if (request.readyState 
if (request.status == 

"var customerAddress = request.responseText; 
document. getElementByld (''address^) . value = customer Address 
else 

alert (''Error ! Request status is、' + request. status); 

\ / 

卜 6ase 七 s*ta 七 us is〆 七 

ou 七 an cvv*ov message "to 

sC.v*cc>r» v/rtii 七 he v*c^ucs*t s s*ta 七 us. 


It - 

Add the code shown above to your updatePage () function in pizza. html. Now reload your 
page in a web browser, and enter a phone number. When you change the phone number field, and 
then move to another field, what happens? Write down the server’s status code in the blank: 


Now fix the request URL in getCustomerlnfo () so that it points to the correct script on 
the Break Neck server. Reload your page, and see what happens. Did you get another status 
code? Write down what happened when you used the correct URL: 
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absolute and relative urls 



Wait a second. If theres a mistake in 
the request URL, is the server even 
getting our request? 



The request URL is a relative URL 

Remember the first part of the request URL from 

getCustomerlnfo () ? 



仏 e ' phone " 

-to ^akc 
iWls ^ I'Ule sW 七饮 . 


This is a relative URL, and doesn’t include the domain name 
of the server that the request should be sent to. So what 
domain does the browser send this request to? The browser 
will automatically use the same domain that it requested the 
pizza. html web page from. So if you entered http://www. 
breakneckpizza.com/pizza.html to view the Break Neck order 
form, your web browser would turn the relative URL above 
into an absolute URL, like this: 



So the request gets sent to the same server that your browser 




downloaded the pizza order form from. Even if the program 

to run on the server is ... mis-spelled ... the request will still get Could be 

sent by your browser to the right server. ^ ^ o\r a 

PWP ov- 3 /^uby 

TW|S - |S ayx absolute URL- It V>as ^ a to a ㈣ 咖饮 ^ ?0 ^i 0}r ahy 七饮 

, f， bit of codt ^u^ ih9 0h 

"the StYMtY. 


d domdur\ 灼 awC” 


■file OY\ sevvev. 



TWis is velatWe URL - I't ^ as 


dormant 


• just the path "to the 

pvojvar^ ov -file oh the 


sewev. 
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OK, so I see how \Ys getting to the server. But if 
the server caiVt find the program in the request URL 
to run, why does the browser still run our callback? 
Shouldn’t it report an error or something? 

The browser always runs your callback... 

...and it did report an error. 

The browser will always run your callback, 
because that gives you a chance to respond to 
whatever the server did to handle your request. 

Since you’re using an asynchronous request, the 
callback is the only way you have to write code that can 
deal with a server’s response. To help you out with 
dealing with that response, the browser gives you both the 
state of your request, and the status of your request. 

There’s a different between the state of your request, and 
the status of the same request. Your request’s ready state 
tells the browser what stage of processing the request is in: 
initialization, processing, completed, etc.. But just because 
a request is complete doesn’t mean that the request was 
successful... that involves the status of the request. 

A server reports any problems with a request by using a status 
code. The status code indicates what happened during the request, 
and whether things went as you intended. So even if a request 
was completed, you still need to make sure the status code for the 
request indicates that everything went OK. 
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ready states and status codes 


Servers return a ready state and a status code 

The server is sending a lot of information back in its response... 
maybe more than you realized. Here’s a look at how the server 
returns both a ready state and a status code: 



Your request object sends a 
request to a web server. 

〆 


objcd-t sends a request 
b> y/cb sewev. 


Request 
object I 


Request URL 


TKc vc<\ucs-t URL joes -to 七 he 
sewev*, 3>r»di *tclls scv*vcv* 

七 Stvift OV scvvlct OV 
-to vuy\. 


► 

1 


Thc 5e ^ 3 ^ v-cady 

pass ° h ahd ahy 

daia io a p， a … 


O The web server tries to locate 
the program in the request URL 


Alos-t o-f tKc time, -tKc 

pv-ojv-am ih the vc^ucs-t URL 

is a sd\ript o\r flrojv-am v-Uhhihg 
or> iKc scv-vcv-. 
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Thc a sishs 
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ready states and callback functions 



FRGOUGNTUzl ASKED 

FSTIONS 


Ul I thought the ready state told 
us the server was finished with our 
request. Why do we need to check a 
status code, too? 

Al The ready state lets you know that 
the server is finished processing your 
request; that’s why you should always 
check it before running any code in 
your callback function. Then, once you 
know your request has been completely 
processed, you need to make sure no 
errors occurred; that’s what the request’s 
status tells you. You need both the ready 
state and status code to really be sure 
your request was handled, and it’s safe to 
update the page with the response data 
from the server. 


Ql So we want the ready state to be 
“4”， and the status to be “200” ， right? 


W. Are there any other status codes 
I need to worry about? 

Al Well, you already saw the 404 
status code, which means the server 
couldn’t find the program you requested. 
403 is another common status code, and 
means that you tried to request a program 
or resource that you’re forbidden from 
accessing, at least without authentication. 

There are lots of other status codes, too. 
There’s a complete list online at http:// 
www.w3.org/Protocols/rfc2616/rfc2616- 
secl0.html. 


Ql Do I need to write JavaScript to 
handle each one of those codes? 

Al Most of the time, all you need to 
check for is the 200 status code, and print 
an error if the status is something else. 


And even with a bad request 
URL, the server will respond to my 
request and my callback will get run? 


Remember, since we’re using 
relative request URLs, the domain name 
of the request will be the same as the 
domain name of the server hosting your 
web page. So if your web page is at http:// 


www.breakneckpizza.com/pizza.html, 
your request URL’s domain name will be 
http://www.breakneckpizza.com. You can 
then add anything after the domain name, 
like directories or the name of a script or 
web application. 


Remember, there’s a difference between 
the server, and a program running on the 
server. As long as your request has your 
web server’s domain in it, you'll get a 
response—even if the response is that the 
program you asked to run on that server 
is missing or unavailable. 


A: Right. A ready state of "4" means 
the request has been completely 
processed, and a status code of “200” 
means that there were no errors. 
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You could try and write some fancy 
JavaScript that retries the request, but if 
your request failed, it's usually a problem 
with your web page or your JavaScript 
that needs to be fixed. Printing out 
messages to the screen is only going to 
confuse your users. 


usc 盯丁 P: 丁 ^ P 切 
decode ^ HTTP sU- 6ode ， 















duplication prohibited 


Back to Break Neck. 


Before you abandon the ranks of PI? 办 4 
make sure you’ve added code to your updatePage() function 
that checks your request’s status code. You should also fix any 
errors in the request URL from getCustomerlnfo(). Save your 
changes, and then load pizza.html again, and make sure things 
are working correctly. 


eoo 

iz3 m ® 


Break Neck Pizza Delivery 

0http://www.headfirstlabs.eom/books/hrajax/chapter02/b ^ Google 


BPBBH 

/ ( Your pizza, just fn time 

Enter your phone number: (21 屮 290-8762 
Type your order in here: 

1 Large Cheese Pizza 
1 order of Bread Sticks 
1 2-liter bottle of Diet Coke 


Your order will be delivered to: 


Mary Jenkins 
7081 Teakwood #24C 
Dallas, Texas 75182 


’ Order Pizza 、 


/a 


Make suve 七 ha 七七 
ovdev* -fovm is >wov*kmj 

looks up tus-bomcv*^ 
address, you c.a>r» 

^\att \>'»ZZ3 o\rdcv*s. 


Don’t think you’ve heard the last 

of 腎兑办 4 它 CTt CVI/v 办系 ... 






































J Asynchronous Apps 


She Blinded Me with 
Asynchrony 



Waiting room? I’m sorry, we don’t have one of those. 

This is the Web，not a doctor’s office, and nobody wants to sit around reading 
a six-month old magazine while a server does its thing. You’ve seen how Ajax 
will let you get rid of page reloads, but it’s time to add responsive to the list 
of highlights for your web apps. In this chapter, you’ll learn how to send your 
users’ requests to a server, and let your users keep on working while they’re 
waiting on a response. In fact... strike that. There’ll be no waiting in this 
chapter at all. Turn the page, and let’s get started. 


welcome to the next level 
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what does asynchronous mean? 


IVhat does asynchronous really mean? 

Asynchronous means that you don’t have to wait around while a web server is responding to 
your request. That means you’re not stuck: you can go on doing what you want, and have the 
server let you know when it’s finished with your request. Let’s take a view of this from 10,000 
feet by first looking at what a synchronous request is, and compare it to an asynchronous request. 


A synchronous request for cola 


I am so craving a Head First cola 
Hey Rufus, will you go GET me 
Head First cola from the store? 





ISL 


^ TV_s is you\r \rc'ucs*t : youVc 
askiir^ yowr *t\rus-fey do^ 

Ru-fus -to Jo 6itT you a toU. 




Must get cola, 
must get cola... 



An asynchronous request for cola 

Now ，compare that to this asynchronous request... 



Hey Rufus, will you get me another cola? 




J 



Ukc bc-fovc, 70U wake a 

vc«yucst *to Ru-fus *to 50 
碎丁 >y 0 u a 乙 ob. 

七 Wis time, 70U tell Wirtrv V^C S 


I’m gonna have to 
ask for a pay raise. 
More kibble. 



ajaih ； youv -tvus-ty do^ 
Ru*fus joes o-Pf wi-tK youv 
v-c^ucs-t -to grt youv dob. 
"This "time ； Rumpus is 

^ do 9 ....- 
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asynchronous applications 


f N 

0w 7 my 
back! 

v 」 

Pmally, Ru-fus is orv W\s way 

r 

Good boy, Rufus! But I gotta make 
you an asynchronous dog... my back 
caiVt take this anymore. 


bddk y/rth youv dold - 

/ 



5 , 

… but because its a 
syndlivonous vc^ucst ； 
you av-c totally and 
do 叶 Ictcly £JUC^ 
until *tKc v-csponsc 
domes badk^ 






vcs?o 怕 M 0U 

yt UN -如 k .. 



...v/iVith mc3>r\s you t3y\ 


do v/iiaicvcv you v ； 扣 i 
v/iiile he’s jcii'mj 
iiic dold- VouVc 





y\o-t studk like you 
v/CVC he >w3s 
syy\tiiVoy\ous. 


Rufus yb youv tola batk 
•to you vi#*t 3s you V"C 
need •… 3 a Weak o 灼七 he 


IH yrtty\- ^o\( arid 




r 祕一似 

”赠伙 i do^lcidy siudk whj(c 

you we,re ^3 U it ， 
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asynchronous pizza 


Break Neck Pizza is an asynchronous app 

Take another look at the Break Neck Pizza Ajax application. You type in your phone number, 
and then move to the pizza order or address. The page’s JavaScript then gets your phone 
number from the form, and sends the request for your address to the web server. If your 
address takes a long time to look up, you’ll notice that you can go ahead and enter your pizza 
order without having to waitfor the server to return your address. 


^unctionT geCCustomerlnfo() 

var phone = document .ge tElementBy Id (''phone") .value; 
var url = 、 'lookupCustomer.php?phone=" + escape (phone); 
request, open (''GET' url, 

request.onreadystatechange = updatePage; 
request.send(null )； 


:: 二口： f: :d 




Wcv-c s -the Java£drip-t 
W-tioh ih pizia.hUl 
"that sends j vc^ucs-fc {jo 
"the B^rcak "edk web sewev. 


Ahd Kcirc s the tMatk 

that s iruh whch Ihc v-cspohsc 

匕 badk the 


ttev-cs 讪⑽ w sew 
ftv-cak server. 


Sihdc this is an asyndliv-onous -fvom 

the b\rowsc\r sends \rc<^ucs*t 

七 0 七 you\r address {jo 七 lie -time i-t gets a 
v-cspoirvsc, you dan still go on usmj web 
won ’ 七 be s-fcudk. 


IOh 




Cus-tomc/s 
Address and OyAct 


function updatePage() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var customerAddress = request.responseText; 

document.getElementByld(''address^) .value = customerAddress , 
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asynchronous applications 


But it ivas probably too -Fast for you to notice 

Break Neck Pizza isn’t called “break neck” for nothing — the request to get your address and 
the response from the server happens so fast that you probably don’t have time to start typing 
in your order — much less improve your golf game —— before your address pops up. 


s sooy\ as you -type m youy- 

bev-, bv-owsev- stY\ds a v-c«\ucsi (or 
youv- addv-css -bo iiic scv-vcv-. 


扒 um 


< ^ C + •卜 .ill* 


'*k M*ck Ptgs* 0«lrv««v 


I Ubt.com/bOPkt/lkr 


hhhhbb 

•ml A 众， Cgiog<# 


arean necH Pizza 

^ Your piyya jus^ in 


Your ordor will b« c 


Type your order ii 



</s 4 riyj> 

JavaScript 


y oU see 70 UV address ^ 

u? #七 a ， bcW — ave a 
^ do else- 


0 0€1 iraafeN»ck HoluM hwy 

i |~i»n fs^l f^| [ 4- Kw *«sp fftWWh+K^^SllJbS.CD- I •>»■： 5O t ^TC|- 


ureaif necif Pizza 

^Your pi 7 ?a just rrt time 


Errtijf yqur phonm nymbqf： c?i 4 ；i 
Typ« your ender in here 


Vouri 5 Ptf*r will deiiWKl» 


I ^ 3*2 


Si 


CustomcV'^s 
Piior^C Numbcv 


re^rcHib fKf )； I 

fvr/bor uppfrO.M 
return ... I 

L 1 


PHP script 


No ti^c (ov typihj OV" jol-f hdc/ 

The sc\rvcir mespohds with your ^ 
5 ddv*css almost ii^mcdiS'tcly- 





Cus*tor«ev’s 

Addvcss 


1 

I rc^rcH.bfKpO, I 

fvration uppfrOJB 
vxtuiri% … I 

L 


PHP Script 


JavaScript 
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asynchrony in the real world 


So whafs the point of an 
''asynchronous" application if the 
server responds so fast that it 
doesn’t make a difference anyway? 




What does asynchronous get you? 

Both of the applications you’ve built so far are asynchronous. 
Still, the server responded so fast to your requests that you 
probably didn’t notice any benefit from the asynchronous part 
of these applications. 

But what happens if it takes a really long time to get the data 
back from the server? Or what if you really do need to do two 
things at one time? You’d like to keep using the application 
while that’s happening, right? 

That’s when you’ll really see the benefits of the “asynchronous” 
part of Ajax. In fact, you’re going to build another 
application —— an Ajax-powered coffee maker~where being 
asynchronous makes a big difference. Ready? Let’s get started. 





What applications do you use on 
the Web that would be better if 
they were asynchronous? 
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asynchronous applications 


Building an Ajax-poivered coffee maker 


Two coffee makers... 

...and a whole office of caffeine addicts. 

As the official “coffee pot manager，’’ it’s your job to make sure that the caffeine 
needs of your officemates are met... and quickly, at that. All your mates are 
caffeine addicts, and they get a bit testy if there’s no fresh coffee on hand. Good 
thing that there are two coffee makers; even if one order is being brewed, your 
co-workers can place another order, and have it filled by the second coffee maker. 



You 5 re going to build an Ajax application to allow 
your co-workers to order their coffee online. 

You don’t want anyone coming after you with empty coffee cups, so let’s write an 
Ajax application for ordering coffee and keeping track of the status of both coffee 
makers. Here’s what it will look like: 



TWis is mam ’ 
mSkcV ■- /W / 七 

av\ ovdcv- is plated, 

灼 o dof-fee is bvowm% 

•tw«s makcv 

V^a^dlcs i\\t ovdev. I 七 
takes a little W *to 
bvc>w a tV^ou^, 

tay\ or\\^ bvc>w or\t 

a*b a twc. 


0 O O Ajax-powered Coffee Maker 

卜 nr^ir^irn 百 http://www.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.h ^ ’Q ， Google 



Coffee Maker #1 






Idle 


Ajax-powered Coffee Maker 


Place your coffee order here: 


Coffee Maker #2 


Name: 

Size 

©Small O Medium Charge 
Beverage 

©Mocha 0 Latte CCappucino 



Idle 


i 

\ 




H W s ^ohd do-ffee 
ah 0 咖 is ^ 

，h do ^ cc “饮 + his 

t0 ^ ^ will Udle a,y 
add ^al cdtYs. like 
， “ 饮 _ 认 s a 
，iilc ^ ^ tircw a dup. 


Heve’s y/lic\rc you plade 
you\r ovdev-. You Chtcv* 
youv* *tliC sizjC of 

"tliC dup you dhd 

tyfc of bevevage 
youYc ihicv-csicd ih. 


0v.de told tKc toffee maker 
you >wa^, 70 U t\\tV. 

-to st^d tKc o^rdev {p ^ 

oYtr\ makev. 
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building an asynchronous coffee maker 


Three ingredients for asynchronous coffee 

There are three basic parts to the Ajax-powered coffee maker: 


~®Coiiee maker HTML 


First, you’ll need the HTML for 
the coffee maker web page. 
The page needs to take orders, 
and report on the status of the 
two coffee makers. 


lA/cll Kavc -to tvcatc 
d.oy\*tvols -fov ovdcv-mj 
iyv i\\t HTML fajc. 


tt 



</p> 

<h3>Beverage</h3> 

<P> 

〈input type="radio 〃 name="beverage" 

value="mocha" checked="true">Mocha</input>&nbs 
〈input type="radio" name="beverage" 

value="latte">Latte</input>&nbsp;&nbsp; 

〈input type="radio 〃 name="beverage" 

value="cappucino">Cappucino</input> 

</p> 

<P> 

<input type= ,, button /, 

onClick= ,, orderCoffee () ; f, 
value="Order Coffee" /> 




^JavaScript code 


<sdrifi> 

var 


Second, you’ll need some JavaScript, including: 

♦ Code to create a request object. 

♦ A function to send an order to the 
coffee-making script. 

♦ A function to serve a drink when it’s 
been brewed. 

♦ Event handlers to connect the web form 
buttons to these JavaScript functions. 


•fuhdfcoi 


<html> 

<head> 

<title>Break Neck Pizza Delivery</tit e 

var request = null; 

function createRequest() { 

try { 

request = new XMLHttpRequest ()； 

} catch (trymicrosoft) { 

^reUst = new A ctiveXOb j ect(''Msx I ul 2 .XMLHTTP ^)； 

} catch (othermicrosoft) t 


Server-side coffee-making script 

You’ll also need a server-side coffee-making script, which 



will brew coffee anytime it gets a request 


TW»s »s PHP 

w akcs You II s^d all 

ov-dcv-s -to 




This s^\ ? i handle the 
〆 b ^wih 9 foy both Coffee 
Wkca sihde iwo dups 

bc ai ihc same 

ih app. 


PHP script 
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asynchronous applications 


Connecting the parts of the coffee maker 

You’ve seen the three basic parts of the coffee maker app. But let’s go a little further, 
and see how these parts combine into a coffee-making wonder. Obviously, we’ve got 
an HTML form, some JavaScript, and a coffee-making script on the server. So how 
does all this fit together? 


The web 哪 displays status 
ca ^ tMtt maker. 1^ a «s 

busy bvowm% "bhen *bV\c st3 七 必 should 

maker is WcVm，K a 
aom 3 a_Wm 少七 ^ 如 
s-batus should read Idle - 


一 - - - - \0 D\ 

^ to ^ “饮 sdv-ipt Oh tKe scv-vc^ ahd 

hahdlc tKc wfo^sc -tk sc^. II also r^ceds-to 
update the status o( iK c ^rs, a^d \ti 

how wKck» tKci\r do-ffee is ready. 


Ouv PWPered 



"TV>c >wcb pay also jives you a -few options fov 
ovdev-'m^ youv pev-fett o-f toWcc, and d 
button *to ^ladc youv- ovdev-. 


coffeemaker.php 

TKc do-f-fee makc\r sd\ri|> 七 is \rcally simple: 
i 七 jus 七 takes a v-c^ucst bo b\rcw 
alowj y/i*tli *tKc siz^ ahd type o-f 6o((cc, 
a^d name o-f *tKc pev-son wKo ^ladcd 
ovdev-. Ohdc 七 he doWWs bv-ewed^ 七 lie 
sd\rip 七 sends badk a \rcs^oir\sc with 七 lie 
name o-f *tKc pevsoh whose o\rdcv- is veady. 
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coffee making in action 


How is the coffee maker going to work? 

You should have a good idea of what you’ll need to build the coffee-making 
app. Now you just need to be sure you know what the app will do. Before 
diving into the actual HTML and JavaScript, let’s take a closer look at how 
the coffee maker will handle requests to make a cup of coffee. 



Let’s say that Jim wants to get a caffeine fix. He enters his name into the web 
form, selects Large and Mocha, and then clicks “Order Coffee”. This causes 
your JavaScript to run, which then sends a request to the first coffee maker. 


600 

Ajax-powered Coffee Maker 


P ◄ ► J( c | | (» 

[ + J 0 http://www.headfirstlabs.eom/books/hrajax/chapterOB/coffee/coffee.h * Google 



Jw caters m 

Wts 

toKtt order 


Ajax-powered Coffee Maker 


Coffee Maker #1 




Idle 


Place your coffee order here: 

Name: 


Coffee Maker #' 




Idle 



var - 1 I 

(uhd-tiort foo() { ■ 

u 

JavaScript 


/Vlakc Jim a lav-^e modKa 
us'm^ -tl^C to((cc makcv 



Clidkmg oy \ Cof-fcc w 

dauses 七 lie Javasdvift to send 
a vc«\ucs-t *to tKc sewev h> 
bvcw a dup do^fcc. 



coffeemaker.php 


(^2^j While the first coffee maker is brewing coffee for Jim, Mary decides she 

needs some cappucino to keep her going. Good thing this is an asynchronous 
application —— she can order a drink from the second coffee maker, even 
though the server is still brewing coffee in response to Jim’s earlier request. 




MM *， 

Aiax-poi^rtd Maker 



/Vlakc /Vlavy a medium 
ddffudiho us'm^ -tlic sedond 
do^fee makcv 


TV\c sevvev- is 
still busy bvow'mj 
-("ov v)iw» … 
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七 Ms is a 的 asyuWorxo\AS a 代 ， Mary 
^>lade Kcv ovm do-f-fee ov-dev-. 



coffeemaker.php 

•bu-t is able h> 
dKcdd 3hd bv*cv/ 

dup us’mg *tKc 
sedohd mdkev*. 
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The coffee maker is finally done brewing Jim’s mocha, and sends 
a response back to your page. The browser runs your Javascript 
callback, which updates the status of the first coffee maker to “Idle” 
and lets Jim know that his order is ready . 


Youv 乇 

wakcv- #1 

㈣ WW 


■ ^d Ids 
how that his 
Coffee is \rcady. 


[c I 


〜 AK-po«v«f*d Coffee Maker 

AJax- powered Coffc« Maker 







Fiwis^cd bvc>wir\^ 
do^-Pcc -Pov Jim usih^ 
do^fee makev 养 I 


JavaScript 

N/ouv JavaSt^-b uses i)nt server 
vcs^o^sc *bo -fi^uvc ou*b v/Widh 
todtt makcv is fm'isKcd, a^d 





* rr 






coffeemakenphp^ 

TKc sc\rvcv-'s still 
b\rcwihj A/js^ys 
^o-ffee ； bu-fe -fihisKcd 


Now, Jim has has mocha, Mary’s capuccino is almost ready, and the first coffee 
maker’s available again to brew more coffee. Even better, nobody had to wait 
around for their caffeine fix. 


U P wi-feK Ji»v/s dup. 



r 

它 v ⑼ 70UV boss »S 


^ 3 ^ -full ^ j j 

^ y ou V c Gj 

^ you, a , 9 sc 
7 ^ c ^i isc . 


In the book’s examples, find the chapter 03 /coffee directory. We’ve already written 
the PHP for the coffee maker and named the script coffeemaker .php. You’ll also see 
an HTML file, coffee. html, and some CSS for the page, in coffee. css. Your job is to 
finish off the HTML in coffee. html, and to write the JavaScript to put all this coffee 
brewing and pouring into action. But first, turn the page for a little brain teaser... 


you’re on your way ► 149 



































an asynchronous brain teaser 



(}(^ee (^(McmcUccm 






O 


What do you think would happen if you implemented the coffee maker application 
as a synchronous application instead of an asynchronous application? Try 
this exercise and see if you can figure it out. ^ 

The domes la-tcv- -the 

so you^ll have io keep 9 oih 9 

Sara places an order for a ■ kr»ow \( y ou it ― 七 / 

small latte and gets the first 
coffee maker brewing. 


1 4 B; c alfi* ,'-1 ： n "今 t 

Maker 


yeuf ceffw ^rd 蠼 r htrft? 




Bvc>w £dv-d d small 
laiic v/*rtK -the 
fivs-t do^fee makcv 


Mjikcr #2 




<sdrift> 
var - 


fuh 6 *tior> (ooO { 


</ s4ript> 




JavaScript 


<? 和 

rt^rcHib f Kf*); 

up|»erO^ 
rtlwrn ... 

L 






coffeemaker.php 


o 


Your officemate needs some coffee. Can she 
use the second coffee maker while the first coffee 
maker is brewing Sara，s order? Remember, this is 
a synchronous application (at least for now). 


-fivst 

mdkev is still bvow'mj 
to-f-fee -fov Sava. 





IW# 厂 rwww KtM 户 ^ 


Ajax-powered Coffee Maker 


Coffee ： Maker #1 


Co/pfce Mjiktr ,2 







Skfrf 1 、 l^TimJI Li1_ 




yeuir coffin pndtr h^rm 


mmMi\ 


DCiPPunir 



coffeemaker.php 


heeds 

some 亡 oWcc. 


Co^c dohUhdirum ： dah Jahidc use -the 

SCdohd do ^ cc while the ^ivst 
^akcv is still bircwihj a dup 4v 
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asynchronous applications 


The back-and-forth of Ajax development 

In Chapters 1 and 2, you were able to start working on an application and 
develop it piece by piece until you were done. In this chapter, we’re going to 
have to go back and forth a bit between the three parts of the coffee maker 
app. This is called iterative development, because you keep working on 
the same pieces over and over. 


y 0 ull see iW\s jv-apKit ai *bop o-f 
mosi pages m 七 his |*t 

v/i|| you 

maker a 代 >wcVc oy\. 



VJC 


: 二二％ 
0 此 w ^ 





HTML form 



Most applications 
are developed 

iteratively ： you 
JavaScript keep coming Lack 

to tilings you’ve 
already worked 
on，and acting 
to ana improving 

tkemi 



£v ⑶ whch wc stairt wo^k'm^ 
tKc Java^v-ip-t o^* Pffp, 
wc II still have -fco dome badk 

■to the HTML -to make 
i^pirovcmch-fes Oir dha^jes. 
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writing the coffee maker html 


The coffee maker HTML 

Enough coffee talk; it’s time to build the asynchronous coffee 
maker application. First, let’s take a look at the HTML for the 
coffee maker application, in coffee.html. We’ve gone ahead 
and written the HTML for placing and order and the first 
coffee maker (you’re going to do the second coffee maker later). 
Let’s see what you’ve got to work with: 


I 

HTML form 



JavaScript 

PHP script 



<html> 

<head> 

<title>Aj ax-powered Coffee Maker</ title> 

<link re 1=’’style sheet" type=’’text/css" href=’’coffee • css" 
</head> 

<body> 

<div id= 〃 header〃> 

<hl>Ajax powered Coffee Maker</hl> 

</div> 



All is sia^davdl stuff. lA/c vc 

I'mked bo ar\ style sKcci 

ar\d i^luded a iiilc Vrtii 七 he 
application. 


<div id= 〃 wrapper〃> 

<div id= 〃 coffeemakerl〃> 

<h2>Coffee Maker #l</h2> 

<pXimg src= 〃 images/CoffeeMakerl. gif ^ 
alt=’’Coffee Maker #1’’ /x/p> 

<div id= 〃 co f feemake r 1 - s tatus 〃 >1 dle< / div> 
</div> 




makev. TKc siatus 
ihdidaics i-f -tKc do-ffee makev' 

•s idle o\r blrewihj someohe ； s 
o\rdc\r. wcVc usihj d <div> 

clcmchi -to Kold tKc s-taius twt. 


<div id= 〃 coffeeorder〃> 

<pXimg src="images/cof feeMugWithBeans • jpg" alt: 

<h2>Place your coffee order here:</h2> 

<div id= 〃 controlsl〃> 

<form> 

<p>Name : <input type="text" name="name" id="name" /x/p> 
<h3>Size</h3> 

<p> 

<input type= 〃 radio 〃 name= 〃 size 〃 

value= 〃 small 〃 checked= r, true">Smal 1</input> 

&nbsp; &nbsp ; 

<input type= 〃 radio 〃 name= 〃 size 〃 

value="medium">Medium</input> 

&nbsp; &nbsp ; 

<input type= 〃 radio 〃 name= 〃 size 〃 

value=〃large 〃 >Large</input> 

</p> 


TWis <dW> is -fov 

Coffee Pot 1" /x/p> ov-dcv-i^5 a 


whc\rc you Ch-tcv 
youv so -the doWcc 

khows who i-fc s 




HevVs you 
select 七 he siz« o*f 七 ^ 

dup you 的七： Small ， 
Mcdi'AW '； ov Lav*y. 
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<h3>Beverage</h3> 

<p> 

<input type="radio" name="beverage" 

value="mocha" checked:"true">Mocha</input> 
&nbsp;&nbsp; 

<input type="radio" name="beverage" 
value= ,, latte ,, >Latte</input> 

&nbsp; &nbsp ; 

<input type="radio" name="beverage" 

value= 〃 cappucino 〃 >Cappucino</input> 

</p> 



\ TKis is iKc Iasi o-f iKe do-f-fcc 
l ovdcv- o^tioy\s： you sdcd*t "tiiC 
]-type o( do-f-fee you v/a 灼七. 


<p> 

<input type= 〃 button 〃 < - 

onClick="_ 

value=〃Order Coffee” /> 

</p> 

</form> 

</div> 

</div> 


fWs ihc bu-t-fco h -(^ p| adc a 

to(( ^ dome badk io 

this av\d -fill ih -the JavaSdhpt 

ohClidk cveh-t hahdlcv a bit \ai^. 


<div id="_ "> 

<h2>Coffee Maker #2</h2> 

<pXimg src="images/CoffeeMaker2 • gif" alt="Coffee Maker #2" /x/p> 


<div id="_">Idle</div> 

</div> 

<p id:" clear "X/p> 

</div> 

</body> 

</html> 

TW,s ,s a liUle HTML a^d C££ 

•to make suve ttc OYdtr\^ 

oftioy\s dll mto i\\t nxa\r\ 

^>avt oi tV\c -fov-m. 


加级一 t 瓜 ▲ 



C Q ♦ hMfiritUbT 


Poured Coiftt Mik*r 

^ 物 h/h 吵 
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separating your javascript from the html 


Before we start working on the 
Javascript, I was thinking... Wouldn’t 
it be better to put our Javascript 
in a separate file instead of always 
mixing it in with our HTML? 


Y 


■ 

HTML form 

JavaScript 



PHP script 




Yes, let’s put your JavaScript in a separate file. 

Instead of putting all the JavaScript for the coffee maker directly in 
the HTML, let’s put it in a separate file. Then we can link to it using a 
<script> element in the <head> of the HTML for the coffee maker. 
Just like separating your HTML and CSS is a good idea, separating 
your Javascript from your HTML is also a good idea: it keeps the logic 
(the Javascript) of your application separate from the app’s structure 
and presentation (the HTML and CSS). 


You’re probably tired of typing the same JavaScript over and 
over for each application... we can take care of that by creating 
two files for our JavaScript: one for the JavaScript that stays the 
same for every Ajax application, and one for the JavaScript that’s 
specific to an application. Let’s call the JavaScript file containing 
the code that’s common to every application ajax. js, and the 
file containing the code specific to this Coffee Maker application 
coffee. js. Go ahead and update your HTML with two 
<script> elements linking to the two JavaScript files you’re 
about to create: 

<html> 

<head> 

<title>Aj ax-powered Coffee Maker</ title> 

<link rel= 〃 stylesheet 〃 type= 〃 text/css’’ 
href= 〃 coffee•css 〃 /> 

<script type="text/javascript’’ src=”ajax. js’’> </script> 
<script type=”text/javascript’’ src=’’coffee • js”> </script> 
</head> 

<body> 

</body> 

</html> 
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You know, I think we should actually make 
two files—one for the JavaScript that’s 
the same in all our Ajax applications, and 
one for the JavaScript thafs specific to 
the coffee maker. Then we can use the 
common JavaScript file any time we write 
a new application. 


\1 


7 

Hcvc arc ttc Uo elements you 

-to Imk bo ttc Uo JavaSt 外七 Wes. 
dt suve to add ttc e 叫十 / s ? adc a^d 

ta5, OV some Wo^sc^rs load 

七 he 七 * to’ 




























asynchronous applications 


-^^Just Po It - 

Here’s an outline of the Javascript you’re going to need for the Coffee 
Maker application. For each bit of JavaScript, indicate whether the code 
should go into the “ajax.js” file or the “coffee 」 s” file. 


try { 

request = new XMLHttpRequest(); 
} catch (trymicrosoft) { 
try { 



request = new ActiveXObject ( 、 'Msxml2 .XMLHTTP ”）； 
catch (othermicrosoft) { 
try { 

request = new ActiveXObject (''Microsoft.XMLHTTP^); 
} catch (failed) { 
request = null; 



ttc file 

七 he 6odc oy \ cadK Imc- ''N 


function getBeverage() { 

// Figure out what beverage was selected 



function serveDrink() { 

// When the coffee maker is done, serve the drink 



if (request == null) 

alert (''Error creating request object!"); 

function orderCoffee() { 

// Take an order from the web form 



function sendRequest(url) { 

// Send a request to the Coffee Maker 



var request = null; 
function getSize() { 

// Figure out what size cup was selected 
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breaking up the javascript 



fRGOUGNTUzl ASKED 

QUESTIONS 



1 

HTML form 

JavaScript 



PHP script 



Ul I couldn’t figure out whether to put the sendRequest() 
function into ajax.js or coffee.js. On the one hand, we’ll 
need this function for every Ajax app, but on the other 
hand, it will have code that’s specific to the coffee maker 
application. Which file does this function go in? 

Al You’re right—that’s a toughie. You could probably 
go either way on this one. We decided to put the 
sendRequest () function in the ajax.js file, even 
though—as you’ll see in a few pages— sendRequest () 
has no coffee maker-specific code in it. We decided to do things 
this way because we like keeping the sendRequest () and 
serveDrink () functions together. Since serveDrink () 
does have some coffee maker-specific code, we put them both 
into coffee. js. 


LI 二 Why do we need a separate function for getting the 
drink size and type of beverage? 

AI As you’ll see in a few pages, it takes several lines of 
JavaScript to get the value of a radio button, which is the 
control we use for getting the size of a drink and the type of 
beverage. We like keeping this code separate from the rest 
of orderCoffee (), which will build the request URL and 
update the coffee makers’ status text. 

UI It looks like the request object is created in static 
code. Why did we do that again? 

A 

til By putting the code that creates the request object into 
static JavaScript—JavaScript that’s not in a function—any errors 
that occur will be reported before the coffee maker can be used. 
That way, none of your co-workers get their order entered in, and 
then find out that something went wrong. 


Here’s what we did... 

We put all the code that creates and tests the request object into common. js, and then put all the 
coffee-related functions into coffee. js. If you did things differently, that’s okay. Just make sure you 
remember where each function is so you know which file to edit as you build the rest of the application. 



ajax.js 


var request 
try { 


if (request 


=false; 


==null) 


function 
function 
function 
function 
function 

coffee.js 


sendRequest(url) {. 
serveDrink() {...} 

orderCoffee() {...} 

getSize() { ... } 

getBeverage() {...} 
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V/C v-c 



Just Vo It 


lA/cItomc to «Wat»vc (icvclo?*^ 七 … 

batk -to u ? tV>c HTML ’ 
^ staged o, tV,e JavaS ㈣ t 


cvc 灼 


r 

HTML form 



JavaScript 

FHP script 


Now that you know the name of your JavaScript 
functions, you can finish up the rest of the HTML 
for the coffee maker. 

几 is is y OWr tM^U\ ^i| c . 


<h3>Beverage</h3> 


u 


<P> 

<input type="radio" name="beverage 
va1ue="mocha" 

checked:"true">Mocha</input 〉 
&nbsp; &nbsp; 

name - ^ 


<input type="radio" 


'beverage" 


value="latte">Latte</input> 


&nbsp;&nbsp; 

<input type="radio 


value: 




name=’’beverage’’ 
cappucino">Cappucino</input> 


</p> 

<p> 

〈input 


type=’’button 
onClick =〃 _ 




value =/, Order Coffee’’ /> 


</p> 

</form> 

</div> 

</div> 


> 


<div id =/, _ 

<h2>Coffee Maker #2</h2> 

<pXimg src=’’images/CoffeeMaker2 .gif’’ 
alt="Coffee Maker #2" /X/p> 
<div id="_">Idle</div> 

</div> 







Coffe* M*kcr Ml 


Coffee MAkcr «Z 








■ COffiH i[?rdCT 


V _dM 


Fill in the blanks in the HTML on 
the left for placing a coffee order 
with the name of the function to run 
when someone clicks the “Order 
Coffee”” button. 

Next, finish the HTML for 
the second coffee maker. 
Remember, all your element’s id 
values should be unique. We’re 
depending on the id names in 
the JavaScript, so make sure you 
check your answer with ours (on 
the next page) before moving on. 


^ y° uVc ^udk, look back ai the HTML 
(o^r tKc (\>rsi makcv-, a^d use 

asa 你 0 dd “ ^ the bl^ks oh the 

sedohd doffee makev- HT/WL. 
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completing the coffee maker html 


-c 


HTML form 


JavaScript 


PHP script 


Po It Solutions 


Now that you know the name of your JavaScript 
functions, you can finish up the rest of the HTML 
for the coffee maker. 






<h3>Beverage</h3> 

<p> 

Cinput type="radio" name="beverage’’ 
value=’’mo cha’’ 

checked:"true">Mocha</input> 

&nbsp;&nbsp; 

Cinput type="radio" name="beverage" 
value=^ latte ,, >Latte</inpu t> 

&nbsp;&nbsp; 

Cinput type="radio" name= A, beverage^ 

value="cappucino">Cappucino</input> 

</P> / — 

<P> X 

Cinput type= ,, button /, 

rmm iek =〃 ordgrCoffcci^ 

value =/, Order Coffee" /> 

</p> 

</form> 

</div> 

</div> 

<div id =〃 coffeewaker2 -> 

<h2>Coffee Maker #2</h2> 

<pXimg src =/, images/CoffeeMaker2 . gif 7 

alt="Coffee Maker #2" /X/p> ^ 

<div id=" cQffegwaker2-status__ / >idie</div> 
</div> 




hnft. iV.riWA.h 


i cpM^tuckii'hr^ii^chj^mOS, 


Coffee iMaker 


Coffe* MAkcr *1 

_ ds^ 'm 


Wh Pftakcr MZ 



a#t 


■ ?rdtT ! 




ov-dcv-Co^ccO «s tv^c 
JavaSdvi^t 
^ouil v/Vrbc -to wd a 
v^ev/ 6 oWcc ov-dev *to 
6o«cc^ak»^ P^P 咖 ? 七 . 


I 灼 "tllC -fivst do^-fee 
makev, ilicsc ids y/cv-c 
^o-f^ccmakc\r/ w a^d 
'dof-fccmakcv-/ -s*ta*tus'" 

".so m tWis makcv, 

y/e jus 七 all tV>c 

Ys to w 2-"s. 
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Sending a request for coffee 

With the HTML complete, it’s back to our JavaScript. Let’s write the 
JavaScript to send a request to the server to make coffee. By now, you’re 
a pro at making requests, so orderCoffee () should be a piece of cake, 
right? Let’s think through what this function needs to do: 


■ 

HTML form 

JavaScript 



FHP script 




z. 


eoo 

[3 © 


OB 


Ajax-powered Coffee Maker 


@ http://www.headfirstlabs.eom/books/hrajax/chapter03/coffee/coffee.h ^ Qj Google 


Ajax-powered Coffee Maker 


Coffee Maker #1 



- _ 



Idle 

Place vour coffee order here: 


Name: Jim 

Size 

O Small O Medium ©Large 
Beverage 

© Mocha ◦ Latte 0 Cappuci 


Order Coffee ^ 





A 



.ate" W»s 一 e and 
w 0vdcv W WtW 



Z. TKc onClidk event Kandlcv 
■fov tKc w 0vdicv Cof-fcc ；， 
button 七 ells 七 he bvoy/sev 
*to vun youv ovdcvCo^-fccO 
JavaSdvipt -fu^dtioh. 

m ft 如 

•c oUk ?cvsoy, 

-dcred 如 

切 ? e d 

-akcr should 
WCN, drmk (I or 


♦c 。 Ao 岵忪 _ 亡 

CXt ，% a, ： 9 wiih dHMk si -°^ 

c har^c o( -the do^fcc-rhakihQ pffp 

a,d ih c d ^k d^ l ' 


午 . sc^aRc^cstO sets u\> 

-tV\C ddllbddk -fuy\6*tion, 
scv"vc^vi^k0 ； *to handle 七 he 

SCV'VCV'^ VCS^O>r»SC ； 3^^ 七灼 
sc^ds i\\t ^rc<\ucs-t to ttc URL 
• 七 七心⑽ oy'dty'Co^ttO. 


dc^f-fccmakcvplip? Jim 

fsiz«—lav-gc 
fbcvcvajc—modiia 
fdo^^ccmakcv—I 


ov< 


SIZjC 



coffeemaker.php 
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sending a request to brew coffee 


Writing JavaScript to send the request 

Now let’s write the JavaScript to send the request 
to the coffee-making script: 



HTML form 

JavaScript 



PHP script 



/\|| tW»s todt should 50 


function sendRequest (url) { . 

request, onreadystatechange = serveDnnk, 

request .open (''GET' url, true)’ 
revuest•send (null ), ^ - - 


schdRc«\ucstO scb up iKc dallbadk 
-fuhdiioh -fov- iKc scv-vcv- vcs^ohsc 
(scwcDv-mk) a^d se^ds a ^BT 
irc^ucst -to ilic URL passed ih -from 
makcF\rcsliCo-f-fccO. 


f git—d (一 "). 一 

var beverage = getBeverage () ; < — i/Vdl -tKc Wuho^s {o yi tKc s.« a«^a 
var size = getSize() ; ^ - bev^ajc re^sicd m just a ^ P a 3 es. 


var url 




\\ 


coffeemaker.php?name 

v&size 


sendRequest(url )； 






， + escape(name) + 

” + escape(size) + 
&beverage=" + escape(beverage) + 
&cof feeniaker = l’’ 


七 W. 1 七代 — cr, 


coffee.js 
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asynchronous applications 


Now wait just a second. That's it? You 
completely forgot something—what if 
the first coffee maker is already brewing 
coffee? And what about the second coffee 
maker? When should we use it? 





Which coffee maker should we use? 

Each coffee maker can only brew one cup at a time, so what if 
the first coffee maker is already brewing coffee? Somehow we 
need to find out if the first coffee maker status is “Idle” before 
we send a new request. If it’s busy, we can try the second 
coffee maker. And if that one’s busy... well, then Jim’s gonna 
have to wait a bit for his coffee. 

How do you think we can get the status of each coffee maker? 
Here’s the HTML for the first coffee maker.•• what do you 
think we should do? 

<div id= 〃 coffeemakerl〃> 


<h2>Coffee Maker #l</h2> 

<pXimg src= 〃 images/CoffeeMakerl. gif ^ 
alt="Coffee Maker #1" /x/p> 



How do you think we can find out the status of the coffee 
makers? And how can we update the status when one is 
brewing coffee, and when the coffee maker finishes brewing? 



about 


七 his' dhd we’ll tow\t 
io \i a liUlc 
la-fecir \y\ -fehc dhap-tev-. 
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javascript and radio bt/ffons 


Getting the beverage and size of the order 

Before we figure out how to get and update the status of the two coffee 
makers, you need to write the code for getSize () and getBeverage (). 

Let’s look back at the coffee order form and see what we’re dealing with: 


HTML form 

— ^ 


JavaScript 




PHP script 




eon 


Ajax-powered Coffee Maker 




](a)HE 0 http://www.headfirstlabs.com/books/hrajax/chaf 

Ajax-powered Coffee 







Place your coffee order he 


Name: Jim 

Size 

0 Small C Medium ©I 

Beverage 
©Mocha 0 Latte OCappuci 

’Order Coffee N 


TV^CSC 細 C 

avc tWcc o ? t»oy.s 
Jfov -b^c bcvc^ray. 


<form> 

<p>Name : <input type="text" name: 

id=”name ’， /X/p> 

<h3>Size</h3> 

<p> 

<input type="radio" name="size" 


'name" 

ttcvc avc 

七 he 七 Wcc 

s \ zj ^ dKoidcs. 


value="small ， 

che cked="true->Small</input> i 
&nbsp;&nbsp; 

<input type="radio" name="size" 

value="medium">Medium</i npu t> 

&nbsp;&nbsp; 

〈input type="radio" name="size" 

value="large">Large</input> 

</p> 

<h3>Beverage</h3> 

<P> 

〈input typ e =" ra di 0 " name="beverage" 
value="mocha" 

checked="true">Mocha</input> 

&nbsp;&nbsp; 

〈input type=" ra di 0 " name="beverage" 

value=-latte->Latte</input> 

&nbsp;&nbsp; 

〈input type="radio" name="beverage" 

value="cappucino">Cappucino</input> 

<p> 
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But how do we find out what size 
and beverage Jim selected? 











































asynchronous applications 


Getting the value of a radio group 

The key to getting the size and beverage that Jim selected is 
realizing that there are three different <input> elements, all 
named “size” (and “beverage”). So you need to figure out which 
of these three is currently selected: 


ordtrCM) V.II tall tW,s ^ 

out y/Kat S.Z.C >/3s ordtrtd- 



is -tKc Chtiv-c web pqe, 
(o\-n\sCOJ is -tKc -fivs-t or» 
thai page. TKch ； w siz< w is iKc 

^ <mpui> dcmchls iKal lei 
USCVS seledi dvihk siz^. 


g\Yxtt -tV^cvc »S wove 

■tv^a^ O^t clcwc^-b 广 

^tA w s'»iC ，， J *tW»s 
vav'»aWc tc a 
yro\^ clcwcir\-ts, 

⑽七 jus 七 a —le 
< 中 * t> element 



function getSize() { 

var sizeGroup = document. forms [ 0 ] .size; ^ ,s loops -tK\roujK all iKc 
for (i=0; i<sizeGroup . length; i++) { 之一 clcmchis ih iKc w siz< w gvoupmj... 

if (sizeGroup[i].checked == true) { 

return sizeGroup [i] . value; ^ •• this line dKcdks -to see i-f the 

duvv-Chi element is t\\ttVtd 


y/^VC -fou^d "tKc Option *bV)3"t *S t\\ttV-td) 

七 Vct'AV'Jrv \/al 叱 "tha 七 item. 


TKc vc-tuv^cd value Will be w small' 

Wi_: ov v/W.6V> *.S C%adtly Wat 

七 he ovdcv-Co^-fccO -fuy»ttioyv needs. 


奢 _ If 


It’s your turn to work with radio <input> elements. 
First, open up coffee.js and add the orderCoffee(), 
sendRequest(), and getSize() functions that we’ve 
looked at over the last few pages. 

Next, you need to write the getBeverage() function. 
You should be able to figure this out from the HTML 
in coffee.html, and the getSize() function you just 
looked at. Once you’re done, be sure you save 
coffee.html, and then turn the page. 


you’re on your way ► 


163 







asynchronous and synchronous applications 





Tonight’s overly caffeinated guests： 

Asynchronous and Synchronous Application 


Synchronous: Hey Mr. Asynchronous，long time 
no talk. 

Asynchronous: No kidding... every time I call you, 

I get a busy signal. You’d think we weren’t even 
brothers. 

Synch: I’m a busy guy, you know? And I don’t let 
anything get in the way of me paying attention to 
the user I'm serving. 

Asynch: I can see that. But what about all your 
other users, waiting around? 

Synch: They’ll get their turn, too. Remember, I 
learned from Client-Server himself. He was really 
great; everyone liked him just fine, and he was the 
strong, silent type, just like me. 

Asynch: I guess. I always thought he seemed a lot 
more like the my-users-are-all-tired-of-waiting-on- 
me type. 

Synch: You know, you seem to forget who’s the older 
sibling here. I’ve been around a lot longer than you. 

Asynch: Yeah, and so have your users... waiting and 
waiting... 

Synch: Look, nobody gives their users more time 
and attention than I do. I'm just trying to please 
them. Meanwhile, you’re running around, trying to 
please everyone. That never works! 

Asynch: It sounds to me like you're trying to please 
your USER... like just one. Everybody else has to 
wait in line. 


Synch: Hey, sometimes it's much better to take 
care of one thing at a time, and then move on to 
other jobs. 

Asynch: Sure, maybe if someone submits like 200 
pieces of data. But most of the time, you’re just not 
needed anymore. 

Synch: Just because I don't let people interrupt me 
while I’m working... 

Asynch: Hey, I can listen and talk, all at the same 
time. You're the one with a one-track mind... 

Synch: One-track mind? I just make sure I finish 
what I start. 

Asynch: Sure, but what if that takes ten seconds? 
Or ten minutes? Or an hour? Come on, do you 
really think people enjoy that little hourglass whirling 
around? 

Synch: I don’t seem to get many complaints. 

Asynch: Yeah, well, I'd love to sit around like this 
all day, but my users don’t like to wait on me. That’s 
more your department. 

Synch: Yeah, enjoy your 15 minutes, bro. I’ve seen 
fads like you come and go a million times. 

Asynch: I bet you thought U2 was a one-hit wonder, 
too. I'm not going anywhere—except to make the 
web a hip place again. See you when I see you, 
Synch... 
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IVhat JavaScript do we still need to write? 

There’s a lot of JavaScript that you’ll need to write to make the coffee 
maker work like it’s supposed to. Let’s take a look at all the functions 
we’ve got to code, and review what we still need to do: 


■ 

HTML form 

JavaScript 



PHP script 




TW.S toAt »s m aja^ js. 

吣恨 sa 一如減一“ 

object m 


J 〜 w o wrucr, out 

吨 lUccd 铋 check ihc status o( 
仏 c C^cc makevs ahd ou 七 

V/hidh OhC -to SChd ihc OV-dc^ h>. 




JavaScript code 




You’ll need some JavaScript, including: 

♦ ~eodo4o create-a request object ： 

♦ A function to send an order to the 
coffee-making script. 

♦ A function to serve a drink when it’s 
been brewed. 

♦ Afhgvent handler to cormcct the X 4 de r 
Coff o o” button to -these JavaScript functions. 


orderCoffee() 


•fwndtio* 


serveDrink() 


Wt still have b> y/v-i*tc 
this -furvdtioh. |*t r\ccds b> 
jci 七 lie scv-vcv-^s v-cspo^sc ； 
dr\di se 七 *tlic status o-f 
*tlic makcv- -that 


<html> 

〈 head 〉 

= 【:二二 ㈣ 逄 ^= r ss 〃 

〈script language。avascript type text/] 

var request = null; 

function createRequest() { 

request = new XMLHttpRequest(); 

} catch (trymicrosoft) t 

^reUst = new A ctiv e X0b je ct(''Msxml2 .XMLHTTP ^)； 

} catch (othermicrosoft) { 


/> 


lA/c^c tW.s do^t also. 

S0WCWC 祕 s u 0vde ， CM, ou, 

oYdtrC^ttO vur^s. 


jus 七 -finished bv-cw'mg 


badk *to w |dle”. 


来 Vo^i -Povjc-t, wc ； vc still jot "to yt a 
do-f-Pcc—makmj sdvift oy \ -the sewev, 

"too. I/Vcll jet io tha 七 m a Irttle bit 


you’re on your way ► 
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working with the text in a <div> 


Getting and setting the text content in a <div> 


■ 

HTML form 

JavaScript 



PHP script 


Let’s get back to orderCof fee (). We need to get the status of the first coffee maker from the 
: coffeemakerl-status” <div> element, and then if the status is “Idle”，send a request to brew 
coffee using this coffee maker. If the first coffee maker is busy, we should check the second coffee 
maker, and the “coffeemaker2-status” <div>. 




On top of all that, you’ll need to change the status of whichever coffee maker you use to indicate 
that it’s busy brewing an order. To get or set the text content in a <div>, you need to use the 
browser’s Document Object Model, or DOM for short. We’re going to go into how 
DOM in a lot more detail in the next chapter, so for now, just follow along using the 
so we can finish the coffee maker application. 


to use the 

pKe-Assewguep 

Java 孓 



What you want ： to get the text in the “cofFeemakeH-status” <d\y> 


<div id= 〃 coffeemakerl〃> 


Coffee Maker 


<h2>Coffee Maker #l</h2> 

<pXimg src= 〃 images/CoffeeMakerl. gif ^ 
alt=”Coffee Maker #1” /x/p> 
<div id= 〃 coffeemaker1-status 〃 > 工 dle</div> 



</div> 







More help from text-utilsjs 


P 敁一 ASS 彡 M6L 印 


Remember, 
we’ll explain it all later ― promise! 



JavaSo^H 僧 is code that’s ready for you to use. Just type it in and 


3 


Idle 




In Chapter 1, you used the text-utils . js JavaScript file to help you update 
Katie’s web report. We’re going to use the same JavaScript utility file in the 
coffee maker. Start out by adding another <script> element into the head of 
your coffee.html file referring to text-utils. js, like this: 


Add "this |i he> 
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<html> 

<head> 

<title>Ajax-powered Coffee Maker</title> 

<link rel=’’stylesheet’’ type=’’text/css" href="cof fee • css" /> 

<script type="text/javascript" src="ajax•js"> </script> 
<script type=’’text/javascript’’ src="text-utils • js"> </script> 
<script type= A, text/javascript^ src=^coffee. js^> </script> 

</head> 


ahci ^ you 
吩汕如 uhliiy 

"tcx-t-u-tilsjs j h 
io ^ Java^^ip-t 
u ^-tiohs. 


















asynchronous applications 


Checking a coffee makers status 

Now that you can use the utility functions in text-utils . js, you can easily 
check the status of a coffee maker using the getText () function, like this: 


function orderCoffee() { 

var name = document • getElementByld ( 、、 name 〃 value/ 
var beverage = getBeverage(); 
var size = getSize (); 


var coffeemakerStatusDivl 





document.getElementByldcoffeemakerl-status ,A ) ; ^ciTcy，iO Wl || . 

var status = getText (cof feemakerStatusDivl) ; <~" the ^ … 

if (status == ''Idle") { V> 

/i ii update the coffee maker’s status lA/c still need to 

makcv -fijuve ou*t Kov/ *fco 

•idle, wc >wa 於七 * to __ n _ '、 _! ^ __t___ n _ „ , _ / _v , update *tKc dof^cc 

makev’s s-tatus, too. 


str\A 

ovdev *to 
ar»d \ti Wcw 
-tKc order- 


var url 


J 



cof feemaker.php?name= A, + escape (name) + 

''&size=" + escape (size) + 
、 '&beverage=” + escape (beverage) + 
''&cof feemaker=l 〃 ； 


sendRequest(url) 


Jav 綱 t WWs ^ -vM 
POM m deUa m 十 . 




Sr 


/ { text-utils.js 


All todt m Wt-utilsjs *.s m 2-. ^ou 

Adrb ou 七於 o>w, ov Wi 七冰七 il we ve talked 
move abou 七七 POAI nr» C^3^*bcv* ^T- 
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changing a <div>’s text 


Setting the text in a <dtv> 

Now that you know how to get the text in the coffee maker status 
<div>s, you just need to be able to set the text in those status 
<div>s. You can use another utility function in text-utils . js 
for this, called replaceText (). 


■ 

HTML form 

JavaScript 



PHP script 




function orderCoffee() { 

var name = document. getElementByld ( 、 'name〃) .value/ 
var beverage = getBeverage (); 
var size = getSize (); 


var coffeemakerStatusDivl = 
document. getElementByld (''cof feemakerl-status^); 
var status = getText(coffeemakerStatusDivl); 


if (status == ''工 die”）{ 

replaceText(coffeemakerStatusDivl f 

name + ^ ' s + 



Brewing 


|Jp -fivst makcv- is 

•.ale, -IW.S y/«ll —aUc 

r^akc/s s-ta-tus -to mditatc 七“七 
•rt’s makmj a dv … k... 


size + '、'、+ beverage); 

var url = ''cof feemaker .php?name =,/ + escape (name) + 

、 '&size=" + escape (size) + 


''&beverage= A/ + escape (beverage) + 


、'&cof f eemaker=l 〃 ； 


sendRequest(url); 





you g 





text-utils.js 


^pl^TextO iakes a, c | c , Chi 
ahd thc ^ pui within 

element This will dlcav ou-t a h y 

cxistih 5 so ihai the icx-t 

you supply bcdor.es b e ^ text 
ih clcmcht 
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asynchronous applications 


，h 水， s d 啦 _ 一 ^ “ 


J SV^Script … "广 " glance ’ 


Let’s take a brief look at text-utils.js. Remember, all of this code will 
make a lot more sense once you’ve gone through Chapter 4. 


function replaceText(el, text) 
if (el != null) { 

clearText(el); 

var newNode = document.createTextNode(text) 
el.appendChild(newNode); 

} 


lUcTc% 七 0 is a 

如七 takes 扣 clcmc”t okjctt, 

_ l,kc a <dw>, a^d a sbr\^ 七 W 

'sets -tKc elects to^i -to 

tKat you ?ass m. 


function clearText (el) 
if (el != null) { 

if (el.childNodes) 
for (var i = 0; 
var childNode 


v^cpIadcTcx-tO uses dlcavTc^-tO -to dlcav ou-t ar» 
elements dohtchts, a^d tKch \rcpladc 7 cx-t 0 sets 
dcmch-ts hew it%i doh-tchi 

< el.childNodes.length; i++) { 

el.childNodes[i]; 


el.removeChild(childNode) 


Wa-U^ ou-t! dcav-Tc%tO Will dlcav- ou-t 
a^y 於七⑶七 m 扣 clcr»»cy\*t ； mdudiy^ 
nested clcmOr\*ts, as v/dl 3s 七 € 乂 七 . 


grtlcxiO y/ill vciuv-h iKc icxi 匕。士灼七 
°*f *tKc clcmch*t you give -to it 


function getText(el) { 

var text = ''〃； 
if (el != null) { 

if (el.childNodes) { 

for (var i = 0; i < el.childNodes.length; i++) 
var childNode = el.childNodes[i]; 
if (childNode.nodeValue != null) { 

text = text + childNode.nodeValue; 


m 3 ^ 


return text; 


is tV,c WW 


REMEMBER: I 七 ’s 狄 i*f you dor/ 七 undcv-s-tarvdi 
七 iiis dodc. iVcVc going *to spend a lot o-f time 
on 七 lie VOM irv nc % 七 Aap 七 cv. 
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completing orderCoffeeQ 



■ 

HTML form 

JavaScript 



PHP script 


But 


With the help of text-utils.js, sendCoffee() figures out if 
maker is idle, and if it is, uses that coffee maker to br^®^®ra^TBut 
what happens if the first coffee maker isn’t idle? In that case, your 
JavaScript needs to see if the second coffee maker is idle, and if it is, 
use that coffee maker to brew the order. Otherwise, you’ll need to let the 
user know that they’ll have to wait for one of the busy coffee makers to 
finish before their order can be brewed. 


Below is the code for sendCoffee(), with several blanks. Your job is 
to set up the JavaScript to try and use both coffee makers. Place the 
correct magnets in each blank, and then turn the page: 


function orderCoffee() { 

var name = document • getElementByld ( 、、 name〃) .value/ 
var beverage = getBeverage(); 
var size = getSize(); 

var coffeemakerStatusDivl = 
document. getElementByld (''cof feemakerl-status ”）； 
var status = getText(coffeemakerStatusDivl); 
if (status == ''工 die”）{ 

replaceText (cof feemakerStatusDivl , ''Brewing 〃 + 

name +、、's " + 

size + '、’’ + beverage); 

var url = ''cof feemaker .php?name=^ + escape (name) + 

、 '&size=" + escape (size) + 
、、 &beverage=" + escape (beverage) + 
、'&cof f eemaker=l 〃 ； 


All todt oy\ 七 lie -fading page is 

favt o( tKc “else" blodk. 



sendRequest(url) 
else { - - 


The W 铷 s dock WilU 撕 ” 

右 vst makc/s status “o 七 W. 
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u scdo^a to^tt makcv should look wy 


t 


var 


document.getElementByld( 

status = getText (_ 

if (status == 
replaceText ( 


'' 


n 


\\ 




''Brewing 


\\ 


s ^ 


\\ // 


var url 


>\ 


7 

'、& 

'、& 


// 




// 


+ escape 
+ escape 
+ escape 




(url); 


else 


(''Sorry! Both coffee makers are busy. 
''Try again later .’’）； 


FF 


>u 6dv^ a ma^c-t wove 
or\Ct i-f you need *to- 
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code magnets solutions 



■ 

HTML form 

JavaScript 



PHP script 


Code 






Solutions 


Below is the portion of orderCoffee() that you should have 
finished off. Be sure your answers match ours, and save your 
copy of coffee.js with these changes. 

All tliis todt is ih -tKc 
ovdcirCo^ccO -fuhdtioh. 


if (status 


\\ 


工 die 


rr 



TWis toAt v-uy»s 七 he *(Vs 七 

makc^r is already WcWmj 
do^-fee -fov someone else* 


dfcument. qetElementByld (lcof^eemaker2-status 



status = getText lA coffeemakerStatusDiv2 

if (status == 
replaceText ( 



ff 


)； 


coffeemakerStatusDiv2 


var url 


'A 


cpffeemaker.php 



escape 

escape 


escape 


sendReguestj (url) 


else 




sure -bo ttc stto^A 
^akev V^cvc! 


[alert 




Sorry! Both coffee makers are busy. 
Try again later .〃）； 




TKis lets users khov/ wheh both 
makev-s av-c alv-eady busy. 


TV^csc arc 

all \tii over- 
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asynchronous applications 


Test drive 

Even though there is plenty of work left to do, go ahead and take the coffee 
maker for a test drive. Be sure you’ve added the sendRequest (), getSize (), 
getBeverage (), and orderCoffee () functions to coffee. js, and then 
load coffee. html in your web browser. 

Enter in an order, and see what happens. Then, enter in another order... are 
both coffee makers being used? 


eor> 


Ajax-powered Coffee Maker 


Jw’s lavy 

•is 


c 


*0 http://www.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.h ^ ^ Google 


Ajax - powered Coffee Maker 


Coffee Maker #1 


Coffee Maker #2 


. —- 


Brewing Jim's large mocha 


Brewing Bob’s medium latte 


Place your coffee order here: 


Name: Bob 

Size 

O Small ©Medium OL^rge 
Beverage 

O Mocha ©Latte CCappucino 


Order Coffee 



is 

ovc^ 

° h S ^Ohd 
^akcir. 






Notice that once an order is placed, the person’s name and 
order details stay filled in. Could this cause problems? What 
do you think we should do to avoid any confusion? 


you’re on your way ► 
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improving the coffee order form 


■ 

HTML form 

JavaScript 



PHP script 


I think ifs confusing to have an 
order brewing, and have the details 
of that order still showing on the 
order form. Can’t we clear the form 
when an order is placed? 




T\strt arc 
plates m toWcc- 

js 

d ^ ^ 

»«akcv- 


I” boili places ； yt 
iKc -fiv-si -fov-m ov\ iKc 
>wcb page, ar\d dal I 
v-csciO oy\ ilic -fov-» 


m rr\. 


174 Chapter 3 


Let’s clear the form when an order is placed 

Right now, your officemates enter their coffee order and click “Order 
Coffee”. The coffee order is sent to a coffee maker, and brewing begins. 
But the order is still shown on the screen, and co-workers could be 
a little confused by that order still being on the screen. It would be a 
lot easier if once an order got sent to a coffee maker, the details were 
cleared from the form. 

You can clear a form using the reset () method. Let’s add some 
JavaScript to orderCoffee (), in coffee. js, to clear the order form 


whenever an order is sent to a coffee maker: 

status = getText(coffeemakerStatusDivl )； 
(status == ''工 die") { 

replaceText(coffeemakerStatusDivl, 

''Brewing '、 + name + s '、 + 

size + '' '' + beverage); 

document. forms [0] • reset (); 

var url = ''coffeemaker.php?name= ,/ + 

、 '&size=’’ + 

、' &beverage: 


sendRequest(url) 
else { 


escape(name) + 
escape (size) + 

’’ + escape (beverage) 
&cof feemaker=l ,/ ； 


+ 


var coffeemakerStatusDiv2 = 

document. getElementByld (''cof feemaker2-status-) - 

status = getText(coffeemakerStatusDiv2) / ’ 

if (status == ''工 die") { 

replaceText(coffeemakerStatusDiv2, 

''Brewing '' + name + s、' + 

size + '' '' + beverage); 

J document.forms[0]•reset ()； 

Var Url = ^offeemaker.php?name=- + escape(name) 

&size =,/ + escape (size) 
、 '&beverage=" + escape (beverage) 
、'&cof feemaker=2"; 


+ 


+ 
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0 O O Ajax-powered Coffee Maker 

[< ^ ] [ C ] [ I [ + ] 0 http://www.headfirstlabs.eom/books/hrajax/chapter03/coffee/coffee.h Google 


Ajax-powered Coffee Maker 



Lets ^7 

out 


Place your coffee order here: 


Name: Jim 

Size 

C Small ◦ Medium ©Large 
Beverage 

©Mocha C Latte GCappucino 


Order Coffee 




^ Cirtcts his do-ffee 

_ just like beW 

...dv\d -bV\cir\ t\\tVs 
w 0vdcv- Co^-fcc^ • 


A 


<r 


0 O O Ajax-powered Coffee Maker 

I < > j [ C [ [ ] [ + j http://www.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.html _’C^ Google 

Ajax-powered Coffee Maker 




Coffee Maker #1 






Brewing Jim's large mocha 



Place your coffee order here: 


Coffee Maker #2 



Idle 


Name: 

Size 

©Small C Medium ◦ Large 
Beverage 

©Mocha C QCappucino 

Order Coffee 



.“… W»A 妙 ds 
i\^t ovdev "to 
^vs-t to^tt 

maker, a^d 如 

vesets i\st W. 


NWs ⑽ U 

?^soirx 一长仫 

ovdicv , 3 
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making coffee on the server 


Its iimc {jo gci iKc scv-vcv- 

some do-f-fee so y/c dah 
S"tav*t sev-vihj d\rihks *to youv- havd 
wo\rkihj do—y/okev-s. 


■ 

HTML form 

JavaScript 

: 



. 


pgp …— 


The PHP coffee maker script just loops for a while to simulate coffee 
brewing. Here’s the code we used for coffeemaker.php: 


<?php 


$name = $_REQUEST ['name A ]; 

$size = $_REQUEST[ 'size" ]; 

$drink = $_REQUEST ['drink/ 

$coffeemaker = $— REQUEST ['coffeemaker^] 

for ($i = 0; $i < 50000000/ $i++) { 

// brewing 


% sdHpt by 9cUih9 

311 thc as o( 

仏 e <rc^ucst URL. 


echo $coffeemaker 
?> 


$name 


Hcvcs 70U m 

r •瓣 I 扣士』 cd 
^dkcv 6 odc. 


TW»S \ooY jVAS-t Wills 
乜仏 .. “ simulates 


bv-cy/i^g is dor\t, iKc s^v-ipi v-ciuv-^s iKc 
humbc\r o( ilic do-f^cc maker iKai -fihisKcd, 
ahd iiic o( 七 lie fev-soh y/liose ov-dev is 
\rcady. So iiiis mijKi look like W |Jim W i-f iKc 
右浐 w»3kc\r -pihislicd oirdcv* -PoV* 

Jio\r W ZMa\ry W i-f iiic scdor»d do-f-fee mdkev* 
■fihisKcd olh ordev* -fo\r Alavy. 



)u6a , do^load 

r :=口 
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IVhat do ive do ivith the server’s response? 

You’ve completed orderCof f ee (), and now cof f eemaker. php is 

done. When you send a request to brew coffee to one of the coffee makers, 
cof f eemaker. php runs and then returns the coffee maker that completed the 
order, as well as the name of the person who placed the order. 


eoo _ 

it— i c 


[g [+3 0 htt P ： 


Ajax-powered Coffee Maker 


http://www.headfirstlabs.eom/books/hrajax/chapter03/coffee/coffee.h * Google 


Ajax-powered Coffee Maker 


r ahd 

匕 lidks il 0\rdc\r Co^fcc W . 


Coffee Maker #1 






Place your coffee order here: 


Name: Jim 

Size 

O Small O Medium @ Large 
Beverage 

©Mocha O Latte OCappucino 
^ Order Coffee A 



cotfee.j 




/Wake Jim a lav-^e modKa 
us'm^ "tKc fivs-t dof-fee makcv 






一 plated order. 



0 I 


]|V| I 


Ujkcr 



powered Coffee Maker 


Coffee M^kier fl 


£XI^ 


Coffee »*akeF **, 





Slit 

I Smill ■. 二 : 0 Large 



<sdripi> 
var y-mlH-fcl 

-fuhd*tioh I 

kfl< 

… 1 

p 



orderCoffee() 


serveDrinkQ^^ ‘ 晰奸 a 如 p 0hSe 




: QUni QC«mK 

Tl 



coffee.js 


^llbadk 


it W i|| 


y° u ihdid ^d ： semvcDriM. 


sc^cPnnkO needs let 

plated ttc ordev kv^oYJ ^c»v 
e.of(cc is veady, se 七七 V\e s-tat^ of 

七 ^ 咖七 to^tt maker badk -to w ldlc”. 
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interpreting the server’s response 


Writing the callback -Function 

The only function left to write is serveDrink (), which needs to take 
the response from the server and figure out who placed the order, and 
which coffee maker was used to brew the order. Then serveDrink () 
can set the coffee maker’s status to “Idle” and let the person who 
placed the order know that their coffee is ready. 

Let’s start by checking the ready state, the HTTP status code, and then 
getting the response from the server. 

function serveDrink() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var response = request.responseText 


■ 

HTML form 

JavaScript 



PHP script 






// Figure out who placed the order, 
// which coffee maker was used 
else 

alert (''Error! Request status is 〃 -4 



request.status) 


Interpreting the server’s response 


The server’s response looks like this when it’s received by 

the serveDrink () callback: 


\A/c vcall 7 从 ed *to 
*tWis vcs^sc 

m*to 士 . 


w l” \Y\d\caits it's 
七 •fiV'st to^tt mdkcv* 
七七 Wowed tWis ovdev- 



S -the IrCSpOhSC 

-f'rom -the sc^vc^-sidc 
^o-pfec-r^akihj 



“Jim” is -the 

"the pevsoh 
"this oirdev. 


hdhrte 
who 


of 

pladcd 





coffeemaker.php 
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Introducing the JavaScript substringO -Function 

JavaScript has a function that’s just perfect for taking a string like the coffee 
maker is returning, and breaking it up into a few parts. Here’s how you use 
the substring () function: 


subsVmjO is ttc 

f 

如火的 stv-mjs m*to smaller ?av*b. 


stavilhdoc is ilic position ih 

you v/Sh-t youv subs-tvihj 
■to begih ai Remember w O w 
•_s "the posi^tioh o-p "tKc -pivs't 

dliavadtcv -； ho-fc w / w . 


var newString = myString.substring(startIndex, endlndex); 


hCy/Si\rihg is ilic smallev* 
subst\rihj vciuirhcd by JavaStv-ipi. 


w >y£tv»^ tv^c vaviablc 
Uds 払 c stv»^ 70U to 
Weak u ? rnto several 讲 alW ? a 士 . 


ehd/，dcx is ih C position ih 咖 h3 

you w^i you, subst ， i，3 {o Chd 

al TKC ai iWts poisi^ion is 

^ '^ded i, ihc subsea. 

个 

It r^sy ^cl\> 70U 

substv.^0 as tveat*^ a 
jfvow \>os'itiov\ s*tavtl^ cy * 

^os'»t»o^ (⑼ dl 灼 do - I). 


myStv-m^ 



y° u 


ii)e le ^h of f:: 3 .— 飿幺糾 
\asi Posi /. 9 ^ i hc 

P 《 hi 广如 ，咖 

午 V - J 


Position ： q 


々 S 七 vm} 1 
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using substring in javascript 


substringO practice 


■ 

HTML form 

JavaScript 



PHP script 


Let’s spend a little time practicing how to use the JavaScript substring () 
method, using the string you saw on the last two pages. 







bsi X 〜 


Position 






mYSVm^l 


TWis Will sWt at 

I, ad a*t \ 办“。 七 

ititr a-t ?os*it»o^ 

> 

myString.substring(1, 3); 




This substvmg ^itA ai fositioh / 
(VO, ahd wcht io positioh (i 一 I), 
whidh is positioh Z m. 




Smdc myS-tv'm^.lch^-th v/ill be I yeatev- 
*thc las*t position, -this y/ill always 

*to 'the cr\d o^c d 

myString.substring( 2 , myString.length); 





position 0 IS 七 

C^acitr m sbr\^ ^ 

myString.substring( 0 , 


… ahd will always 

^ io ihe of ihe stH,a. 


myString.length); 


ThiS Wou | d a)ways 

- ► 
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Po It_ 

You should be ready to write the rest of the JavaScript for serveDrink() on 
your own now. Below is part of that function’s JavaScript; your job is to fill in 
the blanks and get things working. 

You’ll need to get the response from the server, then break that response 
into the number of the coffee maker that brewed this order and the name 
of the person that placed the coffee order. Next you should set the status of 
the coffee maker that just finished to “Idle” and let the person that ordered 
coffee know that his order is ready. 


function serveDrink() { 

if (request•readyState = _) { 

if (request. status == _) { 

va.r response — request • responseText, 

var whichCoffeemaker = response.substring( 

var name = response.substring(_ r _ 

if (whichCof feemaker == 、 'l") { 


r tYt z wRcS you cavi put 
what you just leaded 
aboui subs£\rihgO -fco use. 


var coff©©rna.kerSta.tusDiv 1 
document.getElementByld( 

replaceText (___ 

else { 

var coffeemakerStatusDiv2 
document.getElementByld( 
replaceText (__ 


n 


); 


w 


工 die"); 


\\ 


n 


); 


\\ 


n 


); 


(name 


\\ 


,your coffee is ready!"); 


else 

alert (''Error ! Request status is 




request.status); 
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completing the callback function 


Finishing up serveDrinkO 

Let’s spend a little time practicing with the JavaScript substring () method, 
using the string you saw on the last two pages. 


■ 

HTML form 

JavaScript 



PHP script 


function serveDrink() { 

if (request.readyState 
if (request.status = 


Sh ° Uld ^ 

by how . 




4 


200 ) 



m order *to 

to ^tt maker ^m»sV>cd ^ 


var response = request.responseText; 
var whichCoffeemaker = response.substring (0 
var name = response.substring( 
if (whichCof f eemaker == ''1") { 

var coffeemakerStatusDivl = 


)； 


The hdme 

\rciu\nr>cd by 七 he 

response.length); ,, 

r ^ server Starts 

ih the sedohd 

fosiiioh CTO, 3hd 

document • getElementByld ( ''coffeemakerl-status ’’）； 9 ocs Ch ^ 

-the st\rihg. 


replaceText (coffeemakerStatusDivl 

else { 


工 die") 


var coffeemakerStatusDiv2 


TWis toAt updates -tKc status ok 

maker fmisKcd WcWma. 

\J 


document.getElementByld(^ coffeemaker2-status^); 


replaceText (coffeemakerStatusDiv2 r 、 'Idle 〃）； 




alert 


(name + ' your coffee is ready!") 


else 

alert 「 Error! Request status is 


'' 


request.status) 


TWis last b*i*t just lets 
七 he ipcv*so^ >wV>o ^la^cd 
av> ovdev" k^o>w 七 ha 七 Wis 
dof-fee is r>o>w v-cady* 


182 


Chapter 3 





























asynchronous applications 


So are we done? I*m ready to check this 
new coffee maker out for myself. 



fRGOUGNTUzl ASKED 

QUESTIONS 



0： 


Why didn’t we just use form <input> elements for the 
coffee maker’s status? Wouldn’t that have been a lot easier 
than using all this DOM stuff? 

Al We certainly could have used form elements to display 
the status of the coffee makers. The problem with using form 
elements, though, is that users expect to be able to type into form 
fields. The status elements we're using are for display only—users 
are not supposed to change those values themselves. So it makes 
more sense for them to be non-editable fields that just display text. 

That means we have to use the DOM... but as you’ll see in the 
next chapter, the DOM isn’t that hard. Once you understand how 
the browser really sees your HTML markup, you'll be writing your 
own DOM code in no time. So stay tuned... 


UI Isn’t there a simpler way to get and set the text of a 
<div>? I’ve read about a property called “innerHTML,” which 
would let me just put in the HTML I wanted for the <div>. 
Couldn’t we use that instead? 

A ： Using the innerHTML property is not a good way to 
get and set the contents of an element. It's not part of the DOM 
specification, and the W3C has deprecated it—future versions of 
browsers may not even support it. Worse than that, some browsers 
don’t support it now! 

It’s much safer going with the DOM code we’re using here. In the 
next chapter, well get into all the details about how the DOM code 
works, and once you’ve written a few functions using the DOM, 
you'll see it’s pretty easy to use. Best of all, the DOM is available 
anytime you’ve got a web browser, on any platform. 
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test driving the coffee maker 


The -Final test drive (right?) 

It looks like we’ve got all the JavaScript for the coffee maker app written. 
Be sure you’ve followed along with all the examples so far, and saved your 
changes to coffee. html and coffee. js. Then load coffee. html in 
your browser, and take the coffee maker for a test drive. 


0O 。 Ajax-powered Coffee Maker 

: //www.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.h ^ 

Ajax-powered Coffee Maker 


Coffee Maker #1 


Coffee Maker #2 


. 泰 


Idle 


Idle 


Place your coffee order here: 



Name: Jim 

Size 

O Small C Medium ©Large 
Beverage 

@ Mocha O Latte QCappucino 
^Order Coffee ^ 


//• 




〜纛 x-powered Coff«« Maktr 


f 置 /M 

h«Ad^rstlibs.com/books/hra>Ax/chApter03/coff(«/co^fM.html m/r Qr Google 


Enter an order for Jim: he 
wants a large mocha. Then 
click “Order Coffee . 


Ajax-powered Coffee Maker 


^2) Jim’s order starts brewing, 
using the first coffee maker. 


Coffee Maker #1 





Place your coffee order here: 

N«mc: 

Si2C 

0 Small Q Medium 

Bcvtrjgc 

A Mocha Olattt OCapptKino 

1 Oftlrr Colirr ' 


Coffe« Maker #2 
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Now 





eoo 


Al^x-powered Coffet Maktr 

^ c 

| | 只 hftp 

M^ h»adf，uUlK <om/booiu/l)ra|AK/chApl»rO}/coff##/cof^#-Mml • Q* C-oogi# 


Now wait for the coffee 
makers to finish brewing. 
Whose order comes up 
first? Do both orders finish 
brewing? Is this what you 
expected to happen? 


Ajax-powered Coffee Maker 



CarcHled 


Bob^s o\rdcv- domes 
up cvch 
tliougli i*t v/3s 
ordered sedohd. 


So ivhat happened to 7im’s coffee order? 
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troubleshooting the coffee maker app 


A closer look at the request object 

To figure out what’s going on with Jim’s order, let’s take a closer look at each 
step of the test drive on the last two pages, and what our request object is 
actually doing. 


aoo 

卜 ^ircnr^nr]^ 


Ajax-powered Coffee Maker 


http://www.headfirstlabs.eom/books/hrajax/chapter03/coffee/coffee.h * Google 


Ajax-powered Coffee Maker 



Place your coffee order here: 




Name: Jim 

Size 

O Small O Medium @ Large 
Beverage 

@ Mocha O Latte OCappucino 
^ (Order Coffee ^ 


Enter an order for Jim: he 
wants a large mocha. Then 
click “Order Coffee . 



Remember -the 

is Seated by £hc 
siatic JavaS^Hp-t i h ajaxjs. 


Make Jim a la^e modha 
us'm^ "the -fivs-t do^-Pcc makev- 


M *tWis fomi 
objc6*t *»s used -to a 

■to ^ scwcv^sidc makev. 



coffeemaker.php 




C 成 W UAfc.r 




Ajax-powered Coffee IMak«r 



^2) Jim’s order starts brewing, 
iing the first coffee maker. 


US1I 


Nothihg 七 he 

V"C^ucs*t objcd*t du\rih^ this 

step. The sewev is still 

bvcwihg Jim s do^-Pcc 




<??Kf 

re^virenib f 
Action uf^rOJl 


?> M 


coffeemaker.php 


The Coffee makev is 
bvcwihg Jims lavgc modhd. 
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a< 


Ajax-powered Coffee Maker 


► ][ C )[<&][ + I 0http://w 


v.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.h * Google 


Ajax-powered Coffee Maker 


Coffee Maker #1 

Idle 

. 泰 

Coffee Maker #2 

Idle 


Place your coffee order here: 



Name: Jim 

Size 

O Small O Medium @ Large 
Beverage 

©Mocha O Latte OCappucino 
■’ Order Coffee N 





The sa 州 e v*c«\ucs*t objeti is 
used -to servdi -the request 
-fov* Bob^s ovdev-. 


Alakc Bob a medium laiic usi^^ 
■the sedohd dof-fee makcv 



Now enter another order, for Bob. Bob 
wants a medium latte. Click “Order 
Coffee”，and Bob’s order should start 
brewing on the second coffee maker. 


TV^C same vc^cst objc6-t scy^ds 
a^o^cv vc^cst *to i\\t 
makcv* -fov Bob s ov-dev*. 



coffeemaker.php 


But ivhat about 7im’s order? 

Do you see the problem? Jim’s order is still brewing, but now there’s 
no request object attached to that request! The request for Bob’s order 
overwrote the information in the request object related to Jim’s order: 


TV>c CoY\Y^tt{ ： \oy\ brb/ ⑽七 V>e 

ordtr 

Y；as >wV>cy\ Bob 

pld^cdi W»s ov"dcv- 




A object dah be 

used "to mdkc rhultlplc 

bu£ dah ohly keep 

tiradk <^P ohc 代 spohse 

ihe server at a ti 啪 c. 


T 巧 h 。 ，心 bjd 扦 

^ io , Uh G , 

，晰 4 心 s 叫 

^hes wi^h Ji, 


s o\rdc^r. 


BoWs order *«s set u ? 於卽 ally 

W,ll Wl ^ 

tallbadk Wuhors {x> ^ a^d 

tailback str^s 呼從 

-tKc vcciucst ob\c6*t. 


vWs ovdev- 


Bob’s ovdev- 



4 






Bob’s order will 
finish normally, 
but Jim’s order 
disappears” forever. 


vom 
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using multiple request objects 


We need two request objects/ 

It looks like with just one request object, we can’t keep up with more than 
one order at a time. Let’s see if we can fix the problems we’re running into 
by using two different request objects: 


Time io dig badk ih*to 

y° uv " JavaSdvip-t agaih. 


I" HTML form 

JavaScript 



PHP script 





Ajax-powered Coffee Maker 


hnp://www.headfirsclabs.coni/books/hrajax/chapter03/coffee/coffee.l 


Ajax-powered Coffee Maker 



Place your coffee order here: 


O Small O Medium @ Large 


@ Mocha O Latte OCappucino 


IA/hey> Jim glades Wis 
order diY\d youv CoAt 
sey>dis d veucst "to use 七 

-f*ivs*b dof-fee mdkd. 



TVis vc<\ucs*b object >w»H oA^j 
y/ovvy abou 七 ovdcv'S 

-PiV*s*b Co^tt m3kcv*- 

<? r^ 1 

re^Mrcn>bfkf>); 1 、 

广 


• you should use you^- 
^ ^esi objedt.. 

WC II ^11 "this \rc^ucsil 


coffeemaker.php 


eoo _ 

I 卜 *■ r+ir^ htt p ： ^ 



Cancelled opening the page 


Ajax-powered Coffee Maker 


//www.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.htr 


Ajax-powered Coffee Maker 


Place your coffee order here: 


@ Small O Medium O Large 
Beverage 

@ Mocha O Latte OCappucino 


f 

\A/hey> Bob glades \\\s ovdev-, 
you v\ttd b> use *tV>c sc6ojr\d 
do-f-fcC mdkcv ■… 



TVis v〒st objed-t -takes care 
of all ovdevs made 七 k 

sc6oy\d mdkcv*. 



coffeemaker.php 


•••3hd *thc sedohd v*c^ucs*t 
object Lets dal I this 
request object v*c^ucs*tZ. 


Now 
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keep up with bottu ^tlfee orders. 


vWs ovdev- 



_ Bob’s ovdev 
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Creating two request objects 

First, we need to actually create both request objects. Open up 
ajax, js and make the following changes, so that we’re creating 
two request objects instead of just one: 


This is yowr ajax.js -fil 


C. 


I 达■-二 null, 


v\o 1 。呼 V" y/a 灼七 * to dvcatc 3 sm ^ c 
objc6*b* Pclctc *tWis Imc- 

function createRequest () { ^ - Ho^j, Wh this code badk ih-to a 

var request = null' -fuhdtioh, so wc v~uh i*t move 

try { , . x 仏如 oy\tt easily. 

request = new XMLHttpRequest () ， 

} catch (trymicrosoft) { 

tr J e q Ues t = new ActiveXObj ect (''Msxml2 . XMLHTTP ^)； 

} catch (oth©rinicrosoft) { 

^request = new ActiveXObj ect (''Microsoft . XMLHTTP^) 

} catch (failed) { 

if (request == null) { , . . , . 

alert (''Error creating request objec ’ 

} else { 〆 $ ^ revest crtaitA 

return request; sUttss U\^ a$ ^ ^ 


var 

var 


requestl = createReqaest () ； vbvaSC 冲 t ， Crtdi^t b^o 

-quest2 = createReqaest() ； ^ 咐出知 , W W r 如 , 

value WW. 


I^hch this -fihishes \ruhhihg, you’ll have 
*two \rc^ucs*t objcd*ts-\rc^ucst/ ahd 

^<\ucstZ-d\rcatcd ahd ^ady io 


var xmlHttf... 
■fooO 


USC. 
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sending requests with two request objects 


Using two request objects 

With two request objects created and ready for use, you’ll need to change 
updateCoffee () to use both request objects, instead of just one. We can 
use the first request object, request 1, to send all requests to the first coffee 
maker, and the second request object, request2, to send all requests to the 
second coffee maker... 


■ 

HTML form 

JavaScript 



PHP script 




I think we need to change 
sendRequest() before we rewrite 
orderCoffee(). Doesn’t sendRequest() 
need to be updated to use both 
request objects? 


Yes, let’s change sendRequest() first 

Let’s change sendRequest () to accept a request 
object as one of the parmeters you send to it —— then, 
it will use that request object to send the request to 
the URL you supply. That way, we don’t have to write 
the code that sends a request twice... we’ll just call 
sendRequest (), and be sure to send it the request 
object we want to use. 

Make *tW»s -to youv 

vcv*cs»oy\ se 饩 dRc'wstO’ 






Ais is 仏 = — addiiio, 
y° u ^ io io 
SCy) dRc^ucsiO. 


function sendRequest (request, url) { 

request.onreadystatechange = serveDrink 
request • open (''GET’’ ， url, true) 
request.send(null); 
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These l*mcs of Code y\o^i 

object passed *to 

s ⑶ dRc'ucstO. Rcmcmbcv, 咖’七 a 

vc«\ucst object a^ymovc. 


N 

^i^ UeSil ahd ^ tsil ^ U| 

: r ，: ㈣ 儀二 h 
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Updating orderCoffeeO 

Since sendRequest () handles requesting that a coffee maker start brewing 
an order, you only need to pass in the right request object with orderCoffeeO. 
That means just making two small changes: 



Make both o( -these 

-to youv- vevsioh o*P 
o\rdc\rCo*f-fccO ; ih do-f-feejs. 


|Jf swcM 

3v\ ovdev* *to 


t 


铣 c ^ 

wdkcv-) ^ aUay 

v-c^cs-tl object 


Wt alv/ays use 
re 气 ues*tZ -fov* 
v-e<\ucs*b *bo thcl 
sedohd doHcc maker. 


var status = getText (cof feemakerStatusDivl); 
if (status == ''工 die") { 

replaceText (cof feemakerStatusDivl , 

''Brewing " + name + s " + 
size + '' " + beverage); 
document.forms[0] .reset (); 

var url = ''cof feemaker .php?name =//， + escape (name) + 

、 '&size=" + escape (size) + 
、 '&beverage=" + escape (beverage) + 
、'&cof feemaker^l"; 
sendRequest (requestl, url); 
else { 

var cof feemakerStatusDiv2 = 

document. getElementByld (''cof feemaker2-status'); 

status = getText (cof feemakerStatusDiv2); 
if (status == ''工 die") { 

replaceText (coff eemakerStatusDiv2 , 

''Brewing " + name + s " + 
size +、' " + beverage); 
document.forms[0] .reset (); 

var url = ''cof f eemaker. php?name= ,/ + escape (name) + 

、 '&size=" + escape (size) + 

- 、 '&beverage=’’ + escape (beverage) 

''&cof feemaker=2 /, ; 
sendRequest (request2, url); 
else { 

alert (''Sorry! Both coffee makers are busy. " + 

''Try again later . A, ); 


var nifclHtif-. 

fooO {I 




coffee.js 


youVe on your way ► 191 




multi-request callback functions 


Po It 




■ 

HTML form 

JavaScript 



PHP script 

m _ 


You’re almost done with your multi-request coffee-making wonder app … all that’s left is 
to change the serveDrink() callback so that it can handle two request objects, instead of 
just one. We’ve gotten started on this code by filling in all the JavaScript to handle the first 
request object. Your job is to finish off the callback by writing the code to handle dealing 
with the second request object. 


function serveDrink() 



== 4) 

200 ) { 

var response = requestl .responseText; 
var whichCoffeemaker = response.substring (0 , 1); 
var name = response•substring (1, response.length); 
if (whichCoffeemaker == 


^ of tW iS to&t 
』 deals wi-th -the 

匕 "t how. 


\\ 1 ff 


var coffeemakerStatusDivl = 

document. getElementByld (、'cof feemakerl-status") / 
replaceText (coff eemaker St atusDivl , ''工 dle〃) / 
else { 

var coffeemakerStatusDiv2 = 

document. getElementByld (''coff eemaker 2-status"); 


replaceText (cof f eemaker St atusDiv2 , 、、工 dle〃) 


alert(name 

requestl 

else 




+ '、，your coffee is ready !’’） 

createRequest(); ^ - 




^ have be su^ h> 
ihc ^ucsi 

° hU weVc dohe... -this does 
七 ha 士 by m - 〜沒 ii h3 

“rest obj^i 


alert (''Error ! Request status is 
else if (request2 .readyState == 4) 

// All your code goes here 


ff 


requestl .status); 


Your job is -to >wr*«*tc all 
CoAt 
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asynchronous applications 


Ul We’re using two request objects 
so we can send requests to both coffee 
makers, right? 

AI We were actually able to make 
requests to both coffee makers with just 
one request object. The problem, though, 
was that we can’t get responses from both 
coffee makers with just a single request 
object. 

When you make a request, and the server 
works on that request, the browser uses 
the request object to connect the server’s 
response with your JavaScript code. But if 
you start another request using the same 
request object before the first request is 
complete, the browser can’t make that 
connection anymore. The second request 
overwrites the first one. 

: And that’s why Bob’s coffee 
got brewed, but Jim’s didn’t, right? 
Because his order was placed second, 
so it overwrote Jim’s earlier order? 

Al Exactly. And even though the 
coffee-making script on the server finished 
Jim’s order and returned a response, 
the browser had no way to connect that 
response to your JavaScript. The request 
object was already being reused to handle 
Bob’s order. 

By using two request objects, we can 
make sure that both coffee makers can 
be used, and that the browser can always 
get the server’s response back to your 
JavaScript callback function. 



i RGOUGNTUil asked 

llGSTIONS 

UI So we should always use two 
request objects in our asyncronous 
applications? 


AI No, not at all. In fact, in a lot of your 
asynchronous apps, one request object 
will be plenty. The only time you need 
more than one request object is when 
your app needs to make more than one 
asynchronous request at the same time. 


And why did we turn the code 
that created request objects into a 
function again? Didn’t we just take that 
code out of a function in Chapter 2? 


il. We sure did. But remember, in 
Chapter 2 we only needed that code to 
run once: for the single request object. 
Since we need two request objects for 
the coffee maker, it was simpler to put the 
request object creation code in a function, 
and then call that function twice: once for 
each request object. 

You could have kept the code static—and 
not put it in a function—but you would 
have had to change it to refer to 
requestl instead of request, and 
then create another copy that referred to 
request2. There’s nothing really wrong 
with this, but we preferred to keep the 
request object creation code in a single 
function, and then just call that function as 
many times as we need it to run. 


LI: Why are you calling 
createRequest() again in serveDrink()? 

Al When a server's response is 
complete, the ready state of the request 
object is set to “4”. But even if you use 
the response, nothing resets the request 
object’s ready state. So the first line of 
serveDrink() — if (requestl. 
readyState == 4)— would always 
be true after coffee has been brewed 
using the first coffee maker. 

This is a problem if serveDrink () 
is called when the second coffee maker 
finishes brewing, though. Even though it’s 
the second coffee maker—and the second 
request object—that needs to be dealt 
with, the first request object could still 
have that ready state of 4. To avoid this, 
we need to reset the request object. 

U: Wouldn’t it be easier to just 
set the request object’s readyState 
property to 0 in serveDrink()? 

Al It sure would... except that 
readyState is a read-only property, 
and you can’t set it directly in your 
JavaScript. Only the browser can change 
the readyState property of the 
request object. 

To get around that, we just call 
createRequest (), which creates 
a new request object. That’s a bit of a 
hack, but it's the easiest way to reset the 
request and make sure only an active 
request object has a ready state of 4. 
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working with the second request object 



HTML form 



JavaScript 


PHP script 


You’re almost done with your multi-request coffee-making wonder app … all that’s left is 
to change the serveDrink() callback so that it can handle two request objects, instead of 
just one. Here’s the code we wrote for the part of serveDrink() that deals with the second 
coffee maker. Make sure you have the same code, and save your changes to coffee.js 



requestl = createRequest(); 

} else 

alert (''Error ! Request status is 〃 + requestl • status); 

} else if (request2 •readyState =4) { 

if (request2 . status — 」 200) { 

var response = request2 .responseText; 
var whichCoffeemaker = response.substring(0, 1); 

var name = response.substring(1, response.length); 
if (whichCof f eemaker == ''1") { 

var coffeemakerStatusDivl = 

document. getElementByld (''coffeemakerl-status"); 
replsceText(coffeemakerStstusDivl, 工 die 、 ’ 

} else { 

var coffeemakerStatusDiv2 = 

document. getElementByld ( 、 'coffeemaker2-status"); 

replaceText(coffeemakerStatusDiv^, 工 die 、 ’ 

} ,, 

alert(name + ' your coffee is ready!"); 

request2 = createRequest(); 

} else 

alert (''Error ! Request status is 〃 + request2 . status); 
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asynchronous applications 


Welcome to the world of asynchrony/ 

It’s been a long ride, but you should have everything in place to get your 
co-workers all the caffeine they want, without any waiting. Be sure you’ve 
made the changes to ajax, js and coffee. js so that there are two 
request objects used: one for each coffee maker. 


)000 pfe 

6 ][0) f + 〜 


powered Coffw Maker 


-powered 

Ajax-powered Coffee Maker 



Coffee Maker i 




Brewing Jim'» Urge r 


Place your coffee order here: 

N«m« 

su« 

0 Small 0 Medium Q large 


Coffee Maker #2 




iBnn 






AiAx-powtr«d Cofltt Maker 




Plate to^tt orders 
arsA Bob, a^a ^ botK 
makers 


Coff«« Make# I 




I your coff«« Oftftr I 




Q}r ^ 仏你 《 back veady 

-P^om £hc Usi makev... 


- c ’j[~ 


Colfcc Maker < 


"a 的 d Bob’s ovdev* Covets badk 

-fvom {}\t second CcJcftt r^akc\r! 
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synchrony versus asynchrony 


Thafs all fine, but I want to see what 
happens in this application when \Ys not 
asynchronous. I want to compare the 
synchronous and asynchronous versions, 
and see if the asynchronous version is 
really that much better. 



Skeptical? 


So, you want to see for yourself how different the Coffee Maker 
program is as a synchronous application? That’s easy to do. All you have 
to do is change the third argument of the call to request. open () in 
the sendRequest () function: switch it from true to false: 


function sendRequest(request, url) { 

request.onreadystatechange = serveDrink 
request • open (''GET" , url, false); 
request.send(null); 


Chahjc the airjumc^-t -tv-uc -to -false -to -tdl 
youv application h> the io the 

makers oirj -the scirveir sy^dhy-ohously. 

9 ivc \i a happen? 
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asynchronous applications 


A synchronous test drive 

When you run the synchronous version of the coffee maker application, 
you should notice quite a big difference. As soon as you click on “Order 
Coffee” ， you’re stuck. The button stays highlighted, and if you try to 
enter another order, you get the spinning beach ball (on Macs) or the 
hourglass (on Windows), meaning “You’ll have to wait —— I’m busy!” 


^ 二 —— _ 

C I O ♦ 1 Mwp 


soov\ tlitk oy\ Ov"dcv* 

youVc s 七 utk. 





Colf«« %Uktf 


/SjM-powcrtd Coffct Maker 


Colftt Maker 




Coffee Maker #2 


Wo-thih3 dsc tavx happeh uhtil tKc 
\rcspohSC Conxts badk -fvom 
scwc\r. You wor /七 see the 
s-taius o-f -the r»akc\r £ liable ； 

because tKa-t to&t vuh/ 



Idk 


|-f you *tvy *to do somctlimj else, like 
s-tav-t a r\c>w ovdev, you v/o^-t see 
a^yiKmg because cvcv-yili'mj is 

■fy-ozjC^ u^til 七 VCSpoy\sc domes bd^k- 
You just gc*t youy- system^ w v/aii W iCor\. 


.time passes. 


TKc de is -finished bv-cwihj, 

七 k status the -fiv-st doW cc 
^akc^ is s C i V (bemuse 

dohC 如 d you hC vc^ 

ad-tually see -the “&rcwi< status. • 


Ml tV,at to add 孙 o# 州 \ ucs 七 
叫一 ’ 七 ⑽ ' 

• lt . gyu^rcy sudks .t to 

toffee wakev-s) 


AfiiM po^riil CiSfff* Mjkfrf 

Ajax powered Coffee ； Maker 




Coffee Maker #1 


Coffee Maker MZ 

':. 1 

:.办. 

*1 

Hit 


Idle 


Place your coffee order Pien: 
Name 

鉍 C 

® Sirudl C Metfeum 二 Large 

©MkKi C' L-iLlt C. Cj-ppudna 
f Ccjftnr 、 




— r 
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all is right with the world 


Change that baby back to asynchronous/ 

Don’t forget to change sendRequest (), in coffee . js, back to the 
asynchronous version... nobody wants to wait around on their caffeine fix. 


0 O O Ajax-powered Coffee Maker 

丨 o ir^ir^irn 0 http://www.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.html • Google 


Ajax-powered Coffee Maker 


二 



Two coffee makers, asynchrony, and 
one jittery, wired, happy office 


Cancelled opening the page 


Coffee Maker #2 


Brewing Bob's medium latte 

Place your coffee order here: 


Name: 


Size 


©Small O Medium ◦ Large 


Beverage 


Coffee Maker #1 

Brewing Jim's large mocha 
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asynchronous applications 



Check out the coffee maker for yourself! 


Ajax-powered Coffee Maker 

0 http://www.headfirstlabs.com/books/hrajax/chapter03/coffee/coffee.html * Google 



60 Second Review 



+ Synchronous requests wait for a response 
from the server before anything else is 
allowed to happen. 

+ Asynchronous requests don’t wait for a 
response, so users can keep pounding 
away at an asynchronous application while a 
request is being handled. 

+ A lot of Ajax applications are asynchronous, 
but when a web server returns a response 
quickly, it really doesn’t matter whether the 
app is asynchronous or not. 

+ Asynchronous applications work best when 
the server takes a while to send a response 
back, or when users need to do several 
things at one time on a web page or form. 

+ When you call a request object’s open() 
method, the third parameter tells the request 
whether or not it's asynchronous. A value of 
“true” means asynchronous; “false” means 
synchronous. 


+ The DOM allows you to change a web page 
without reloading the page. 

+ The innerHTML property is deprecated, and 
isn’t as safe or stable an approach as using 
the DOM to change a web page from your 
JavaScript. 

+ Once your requests are asynchronous, you 
don’t need any special code in the rest of 
your application. You write code normally and 
it runs automatically, without waiting for a 
server’s response. 

It’s a good idea to test an application in 
“synchronous” mode to see the difference 
being asynchronous really makes. 


some WcV) 



WEB^VILLE 

tree 

FARM 


歹 miles 
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completing the coffee maker html 


Po It Solutions 


Now that you know the name of your JavaScript 
functions, you can finish up the rest of the HTML 
for the coffee maker. 




r®i: … 


uLibL cpeii i tu&ki^lu'^|u l i i:hLijpwO| l 




Coffee iMaker 


<h3>Beverage</h3> 

<p> 

<input type="iradio" name=^beverage^ 
va lue=’’mocha’’ 

che cked= /, t r ue " >Mocha< / input 〉 

&nbsp;&nbsp; 

<input type="radio" name=’’beverage" 
value= ,, latte ,, >Latte</input> 

&nbsp;&nbsp; 

<input type="radio" name=’’beverage" 

va lue = ’’c appu c i no’’>Cappuc i no< / i npu t > 

</p> 

<p> 

<input type=’’button’’ f f ,、 

nnriick=^ ordcrCoff bbOj 

value 二 ’’Order Coffee’’ /> 

</p> 

</form> 

</div> 

</div> 

<div id =〃 coffeewaker2 〃> 

<h2>Coffee Maker #2</h2> 

<pXimg src=’’images/CoffeeMaker2 • gif’’ 
alt="Coffee Maker #2" /X/p> 

<div id=" coffeewaker2 - status— ">idie</di V > 

</div> 


ov-dcv-Co^ccO tV^c 
JavaSdvi^t -f'Avxdtio^ 

^oull v/ntc {p 妙 d a 
， toWcc ovdcv -to 

t 。如册 s ^ 


In the -fivst 
makev, tliese ids weve 
w do-f^ccmakcvl w a^d 
w do-f-fccmoikcv*l - s*ta 七 us”". 

...so m tWis to-f-fee makev, 
we jus 七 Aa 呼 d all 七 ^ 
Ys to w 2 -"s. 
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+ 邮 Pocuh^n+ Mod 轧 


Web Page Forestry 



Wanted: easy-to-update web pages, it s time to take things 

into your own hands, and start writing code that updates your web pages 
on the fly. Using the Document Object Model, your pages can take on 
new life, respond to users 5 actions, and help you ditch unnecessary page 
reloads forever. By the time you’re done with this chapter, you’ll be able to 
add, remove, and update content virtually anywhere on your web page. So 
turn the page, and let’s take a stroll through the Webville Tree Farm. 


welcome to the next level 
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dynamic web apps 




y/eb 


OK, so here's the thing ： Tm really enjoying 
getting my head around asynchronous 
programming... but all my friends are into 
fancy effects and flashy sites. Isn't that 
part of what makes Ajax apps so cool? 


ActfoniAdv^ntur*, 


Drama 


Indopondant 


.ftciu •挪 


Jcwv, \\td^ 






TTTirTnmi ~ _ N.tn,» K (nt ovtxom. n « 


臑鼦 _ 國 


It— rw#i 


鬌， 》 ■ I 111 ■ 圈 ■ 

^ mm I 




,, *yiql u) 1 内 * 

tiift 

fiickr 


nmh> 


AAni»ni0on 


，0 t«*« - Qpcrt j 








Flidkv- is a yrtai Aja* app. 

vcv-y v^s? 。 灼 sWe, >wi 七 h a 
ic'»|lcv- uscv- mtcv-fadc- 


ir 2 t« 
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^°°^ c ^ a P s is ^ho-thcv- fopuld^ 
Ajax-dHvch appli^£io h . 













































the document object model 


Need a dynamic application? 


eoo 


Top 5 CD Recommtt»d4tion> 


• Optr« 8.S 


tt^TofiSCD 




button to cteor the Top 5 i*<t. 


If you wont 
Over* 


&鼷睡黼 




My Top 5 COs 



C 

… p*te 浐 . 







丁 ^ POM lets 


\ook* 



Use the Document Object Model. 


The web browser uses the Document Object Model to represent 
your web page. When you change this model with your JavaScript 
code, the web page will automatically change, too. 



^ Jav ^^ripi dah wov-k with the 

r^udh easier 赠 kih3 

d'^tHy with HTML ov C£S. 
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a dom retrospective 


Meet the DOM 




(aym) 


Although you may not have realized it, you’ve been using the DOM 
since way back in Chapter 1. Remember this code from Katie’s 
Boards ‘R’ Us report? 


function updatePage () { 

var newTotal = request.responseText; 

var boardsSoldEl = document • getElementByld ( 、 'boards-sold 〃）； 
var cashEl = document • getElementByld (''cash ”）； 

^ dot\A^i objcd-t Jives 

IA/cW ou 七七七 d aUcss ^ 七咐 

todt -tViis -the web kows 饮 dfreaies. 


And here’s some similar code from the Break Neck pizza app: 
function getCustomerlnfo() { 


Tke ” document” 


var phone = 

广 ' document • getElementByld (''phone”）. value; 

Hcvc 、 tiia 七 var url = ''lookupCustomer • php?phone =〃 + 

do6_c 妁七 escape (phone); 

object aym，request • open (''GET", url, true); 

request.onreadystatechange = updatePage; 
request.send(null); 


otject gives 
your JavaScript 
access to tke 
wet Wowser’s 

DOM tree. 


Po〆 七州 . ,ss "tWis— fbs 
^v-obably most w\>ov-*ta^ 

七 Wiq m 如 ^olc tbayW 



204 


Chapter 4 



the document object model 



Under the Microscope ： The document object 

Everything in the web browser’s model of your web page can 
be accessed using the JavaScript “document” object. You’ve 
already seen the getElementByld() function, but there’s a lot 
more that you can do with the document object. 

UC cs 

二 山， Wss “ 

wcb Doa, 


You just type 

W doC.UmCir>*b ， Y^UV 
JavaStv'ift Code, 
dwd use 七 Wis objett 
you 





% 


CO 

① 

O 


document 


O 

A 

CD 


5^0 


切 ement 对 


_ 5?. element oy »« „4-BvId() makes it 

Yo"ve already ^ ^ ^ 

piece of cake TW.s 5 cis tKc 

>wi"tK By\ id o^c ' 


iet tneToot element ot tne documeni 

You can grab the <html> root element from an HTML 
document using the documentElement property: 

|ar htmlElement = document. documentElement; 
■ ^ ^ 

T “ 。oi “盯 u 呼 <h“. 


trele^s id attribute. 


- value . 


… i7n ew nSSkup nodes 

You can use the various 


idii use tne various u rr^Q^ 55 i 
object to 咖 d — 


mylmage = document 


var 

Var f^vShows 
〔doc ument. 


your markup ： 

createElement( 


createTextNode(”24 and 

No\n you add ■this ■tcx.'t y\odt 
your markup. 


img"); 

U\s^> 

Lost "” 


a 


•^Cw <j 


rind nodes by tneir name 

If you want all the elements with a certain name, you can use 
getElementsByTagNameO.This returns an array, so you 11 
need to loop through the array to get a particular element: 

This vetuv-hs dll "tKe <div> clcmcirrts- 

var allDivs = ff .\ 

document. getElementsByTagName ('、div )，• 

var firstPara = 

document. getElementsByTagName (-P-) [0 ^]； 

6\ti all iKc <f> elememb -^ 一 y-cW^ ^ ^ 


clcrhCh't. 




you make b> 
bv'ov/scv*^ model o-f 3 v/cb 

au4jomaii6ally update actual y/eb 

pay m usevs’ bvoy/sevs. 
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where’s the ajax 


This looks like just what I need to 
change my web page on the fly... but 
where's the Ajax? I dotVt even see a 
request object in any of that code. 



The DOM works with Ajax... 

...but the DOM isn’t part of Ajax. 


Hcvcs youv- 切 ? A) a% 

a 代 katu^ makmj a 
V 


Internet Bxplorer 

Firefox 

Web Browser 

Opera 


Safar 


Mozilla 



This is whc^ c J ava ^ Hpi 

^si objed-t hedges so — 七甿 

巨 f 


asynchronous request 




function go() 


j 


PHP script 


TV\cvcs POM todc rn heve … 


>oy\sc 


tv,c same Aja% a ?? , a vcs ? c 

心撕如 server a^d _ •，十 ^ llbad 



Internet Explorer 

Firefox 、 

I Web Browser ^ 1. f 

[ 0pera Safar v ar :一 updatePage () 

MOZilla function foo ( 


server's response 


.. oir hcv-c ； whc\rc you gei 
ihc \rc^ucsi ; ci-thev-. 



</script> 





PHP script 


Youv- tailback yb 

*tV\c bvoMsev* jc*ts 3 


yum 


vcs\>o^sc -fv-om sewev- 
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the document object model 


Oi\tt ^o\A>rt vcady *to update 3 >wcb 
pajc, asy^tWorvous ^avt o( ^ 
^VO^yammurv^ is do>r\C- 


But y OWr dallbadk s-till r^eeds a w< 

铋 a ^ uall y the web P a 9 c 
tKa-t -the usc\r is lookihj at 


^T- 


var requesp 


updatePage() 



When you’re ready to update a web 
page，or just want to build a cool 
user interface，you need to use the 
Document Object Model for the page. 


“Whe “ a 
^ 3 h d SorhC 」 ava 义咐 

ihai Wo ^s Oh Uc t)_ 



getElem* 

need to lo 

var allbivs 
docum™ 

var firstPara = 

document. getElementsByTagName(''p-) [0 ]； 

t 鲁 Q O 4 Top S CO IU<omm«nd«(iom - 


6\ti all -the <f> dcr^ch-ts 




祕 ^ r 

•^S avouy^d OL a ?ay- 



Click on a CD cover to odd it to the Top 5 list. If 
you want to ftort over, dick tKe * Start Over - 
button to ckor the Tef 5 list. 

國蓝 SB 

M 

My Top 5 CDs 


… a 灼 dl tveaic hte CSS 

c-f-fctts, v/ithou 七 ev/ev* 
v-cloadmj pay. 
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the coding challenge 


Using the DOM without Ajax 

Since the Document Object Model isn’t tied to your asynchronous 
programming, there’s nothing preventing you from using the DOM 
in all your web applications. In fact, we’re going to prove it to you... 


The Great Chapter 4 Coding Challenge 

Write a filler web ^plication that useslhe 
Document Object Model to create a dynamic 
user interface, wiflioiit writing any ijjax code. 


use ^ 以 

rrc r w ^ ^ ^ 


Alright, I’m psyched! I want to learn 
more about the DOM. So where can I 
find out how to use this thing? 
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Better visit your local tree farm. 












the document object model 




Hi there, and welcome to the 
Webville Tree Farm. What can I 
cut down for you today? 


r 




IA/cW«llc Tree Pam 
dY>d -fouv>dcv-. 


Mike: Oh, you’re in exactly the right place. I can help 
you with the Document Object Model. In fact, we get a 
lot of requests for that around here. 

Jenny: Huh? Maybe you don’t understand... I’m 
talking about programming web pages. All you seem to 
have is a bunch of trees. 

Mike: That’s right. Trees are exactly what you want. 

Jenny: Maybe I’m not being clear here. I want to 
program web pages, and change the way a page looks 
using JavaScript. What does that have to do with trees? 


Tree farm? I*m sorry... I must be in 
the wrong place. I was told I needed 
to learn about something called the 
''Document Object Model." 


Mike: Every web page is, in fact, a tree. 


Jenny: Is this some sort of weird simile? How are web 
pages like trees? 

Mike: You aren’t listening to me. I didn’t say web 
pages are like trees... I said web pages are trees. Every 
time you give a browser a page full of HTML, the 
browser sees that HTML as a tree. 


Jenny: How does that work? I guess I can see how 
HTML has some structure to it, but I’ve never heard 
anything about web browsers and trees before. 

Mike: Yeah, most people haven’t. But if you’re going 
to change and update web pages with JavaScript, 
you’ve gotta get ahold of the tree concept. Here, let me 
show you what I mean... 


you 1 re on your way ► 
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from markup to trees 


Here’s the HTML that you give to the browser... 

When you’re creating a web page, you write HTML to represent the different 
parts of your page. Then you give that HTML to the browser, and the browser 
figures out how to represent that HTML on the screen. But if you want to start 
changing your web page using JavaScript, you need to know exactly how the 
browser sees your HTML. 

First, let’s take a look at a simple HTML document: 

<html> 

<head> 

<title>Webville Tree Farm</ title> 

</head> 

<body> 

<hl>Webville Tree Farm</hl> 

<p>Welcome to the Webville Tree Farm. We're still learning 
about CSS, so pardon our plain site. We just bought 

<a href= ,A http : //www.headfirstlabs . com/books/hfhtml/”>Head 

First HTML with CSS & amp; XHTML</a>, though, so expect 
great things soon • </p> 

<p>You can visit us at the corner of Binary Blvd. and 
DOM Drive. Come check us out today !</p> 

</body> 

</html> 

/- \ 

OK, this is HTML 101. So what in 
the world does any of this have 
to do with trees? 
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the document object model 


… and here’s hoiv the browser sees the HTML 

The browser has to make some sense of all that markup, and 
organize it in a way that allows the browser — and your JavaScript 
code —— to work with the page. Here’s what the browser turns your 
text markup into: 



,though, so expect great things soon." 


Webville Tree Farm’ 


title 


head 


''Head First HTML with CSSS, XHTML" 


html 


'You can visit us at the corner of 
Binary Blvd. and DOM Drive. Come 
check us out today!'' 


Welcome to the Webville Tree Farm 
Were still learning about C55, so 
pardon our plain site. We just bought 


Webville Tree Farm 


you 1 re on your way ► 
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organizing your markup 


Wait a second. Just because you put a picture of a 
plant behind my markup doesn’t make it a tree. I still 
doiVt understand where trees come into the picture. 



The browser organizes your 
markup into a “tree” structure. 

When a browser loads an HTML page, it starts 
out with the <html> element. Since this is at the 
;‘root’’ of the page, <html> is called the root 
element. 

Then, the browser figures out what elements 
are directly beneath <html>, like <head> and 
<body>. These branch out from the <html> 

element (starting to get the tree vibe?), and have 
a whole set of elements and text of their own. 

Of course, the elements in each branch can have 
branches and children of their own... and on and 
on, until the entire page is represented. 

Eventually, the browser gets to a piece of markup 
that has nothing beneath it, like the text in a <p> 
element, or an <img> element. These pieces of 
markup, without anything under them, are called 
leaves. So your entire page ends up being one 
big tree to the web browser. 


Let’s look at that tree structure again, but this 
time with some lines making the connections 
between the markup a little clearer. 
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How the browser sees your HTML (part 2) 


the document object model 


m -tKc 

tvcc, as v/cll as elements. 



''Head First HTML with CSS (& XHTML" 


''Welcome to the Webville Tree Farm. 

Were still learning about CSS, so 
pardon out plain site. We just bought' 


a 




'Webville Tree Farm’ 



‘ ， though, so expect great things soon. 

''You can visit us at the corner of 
Binary Blvd. and DOM Drive. Come 
check us out today !’、 


* 



V\/V^W 






3^ 


clcwcrx-b m a 7 oU 
usuallv 'cave ^ 
a^\c Watkcts, < a^d >• 



body 




Sometimes aW element 
Kas several dhildv-cv\... 


EvCh'tually, 七 1 化 -tircc 
ends ih leaves, wKi^K 
o-f-fcch a\rc jus-fc pieces 
of tc^t ih the WT 亂 • 


…扣 d oiKc\r -times ； 

dcrwCh*t Kds 
only ohc ^Kild- 


Eadh bi-t o( r^avkup dah have 
叫 ^^bev (>f dhildv-Ch. ~ 


'Webville Tree Farm’ 



head 






html 


is iiic v-ooi 

element Evcv-yi^mj else 
bv-a^tiics ou-t -fv-om ii- 


tWis t'rcc W ⑽ Is. 


<html> 

<head> 

<title>Webvill e Tree Farm</title> 

</head> 

<body> 

r ^|<hl>Webville Tree Farm</hl> 

/. CP>WelC ° me to the Webville Tree Farm. 

' WS，re Sti11 lear ning about CSS, so 

Pard ° n ° Ur P^n site, we just bought 

href= 

"http •• // 贿 . headfirstlabs. com/books/hfhtml/^ 

First HTML with CSS &amp ； XHTML</a>, 
though, so expect great things soon.</p> 
<P>You can visit us at the corner of 

Binary Blvd. and DOM Drive. Come check 
us out today !</p> 

</body> 

</html> 





















dom q&a 



FRGOUGNTUzl ASKED 

UGSTIONS 


Do I need to reference the ajax.js file we’ve been using 
if I want to write JavaScript code that uses the DOM? 


0 ： 


It looks like you called some parts of that markup 
children ■” So an element can have “child elements ”？ 


A: Nope. In fact, Ajax and the Document Object Model have 
nothing to do with each other, other than the fact that most Ajax 
applications happen to use the DOM. But there are lots of non-Ajax 
apps that have been using the DOM for years. If you’ve got a web 
browser that has JavaScript enabled, then you’ve got all that you 
need to start changing web pages using the DOM. 


And what about text-utils.js? That file had a bunch of 
DOM utilities in it, right? Do I need that? 


Al You used text-utils. js in Chapter 1, and then again 
in Chapter 3. It did contain several utility functions, and those 
functions used the DOM to make changing a web page fairly easy. 

In this chapter, though, we’re going to dig deeper into the DOM, 
and learn how to work with it directly, rather than using some pre¬ 
assembled JavaScript. 

In fact, by the time you're done with this chapter, you’ll know exactly 
what’s going on in text-utils. js, and be able to make 
improvements and add additional utility functions for yourself. 


d ^ W 七十恤 0: :七 cd ， 

alo 一七一⑽ U 士 s 咖“ 二 7 

蜂…叫 “ 一 k ⑽七 辩 〆 : 2 •…. 
一 1 k —_ P _ 匕一一 一”… 


AI Yes. When the browser organizes your HTML into a tree, 
it begins with the root element. Each piece of content under that 
root is a branch, but you can also call those bits of content “child 
elements." In fact, you can use family terms like this going towards 
the root of the tree, too: the <head> element can be called the 
“parent” of the <title> element. Keep this in mind; well talk a 
lot more about parents and children in the rest of this chapter. 


It seems like you’re using a whole bunch of new terms, 
like root and branch and child. How am I supposed to keep up 
with all of this? 

AI It’s not as hard as it seems. Just keep the idea of a tree in 
mind, and you shouldn't have any trouble. You've been using terms 
like root and branch and leaf for years. As for parent and child, 
anytime you're moving towards the root of the tree, you’re moving 
towards a parent; anytime you move away from the root, you’re 
moving towards a child. The only term that may be totally new to 
you is “node”，and we’re just about to take a look at that... 
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the document object model 


、㈣ 


What good is looking at a bunch of definitions? This is Head Rush, and 
we want your brain working, not just your eyes. Below are several entries 
from a Web Dictionary, with some of the words in each definition removed. 
Your job is to try and complete each entry by filling in the blanks. 


Y\odt A^y 


picdc o( mav-kup, sudli as 



dn clcmcrrt o\r TKc <a> is By\ 

_ y\oAt } while 七 he w ttcadi Fivs*t HTML 

y/i 七 V) CSS f )<ttTML w 七 c % 七 is a_node- 


A piede o( mav-kup 七 ha 七 Kas 

_ ； sudh as an element 

y/i 七 ii_ 七 C% 七 dorrtcrrt, like 

ov textual diaia- 
Also known as ： Ica-f node 

_^_ 

''Webville Tree Farm 1 



w Head First HTML with CSS & XHTML" 


a 


\ 


P 


piede o-f mav-kup 七 ha 七 don-ta'ms 

_. <Kl> is 七 he paverrt 七 lie 

七 wt 'Wcbvillc Tvcc and <ii 七州 l> is 

七 lie paverrt J 七 he_element 

Also knoy/rv as ： pav-cn*t element paveyrt Y\odt 



dliild- A^y piede o( r»»av-kup 七 ha 七 is 

_by piede o-f mavkup. 

TKc w Hcadi Fiv-s-t HTML y/i-tK CSS 

f )<tt 丁 ML” is 七 lie_ of *tKc <a> 

clcmc^ and tKc <p>s m tKis mavkup av-c 
o-f 七 lie <body> clcmcirrt.. 


Also known as ： dKild node, dKildvcn 


b\r3hdK. A bvarvdii is a_ 

o-f demerrts dnd doirtcrrt. £o tlic 
u body w brandK is all tlic clcmch*ts 

and 七 wt_ 七 he <body> 

clcmcrrt m *tliC brtt- 


\roo 七 dcimcy\-t 丁 he clcmch 七 m 

七 ha 七 all 


a 


。七 iicv clcw»cr\*ts. |y\ HTML ； *tKc \roo 七 
clcmch 七 is always_ 


y\o dKildvcn 
o*tKcv markup 
clcmcirrt 


dKild 
七 c % 七 
doirrtams 


dKildiv-cn 
dolled 七 ion 
<body> 


u 灼 dev 

single 

Y\0 


do^*t3mcdi 

dodument 

七州 l> 


^ a^rc the wo^ds 
y° u should use io 
名 "bUks. 
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Here’s the Web Dictionary with all the blanks filled in. It’s OK if you used 
different words than in our version of the dictionary... just make sure you 
understand what each entry means, and that you are comfortable with 
how these pieces work together to form a tree of markup for a web page. 



hodc- A^y single ficdc o( mavkup, sudh as arv 
clcmcrrt ov 七 c 此 TKc <a> element is 


elemeni node, y/Kilc w ttcadi Fiv-s-t HTML 
W\{}\ CS£ f /HTML” 七 c % 七 is a 七以七 node- 


A fiede of mavkup -tKat Kas 
y\o dKildveirv, sudli ds dn dement 
y/i 七 r\o like 

ov -textual da*ta. 

Also known as ： Ica-f 灼 ode 

_^_ 

''Webville Tree Farm" 



''Head First HTML with CSS & XHTML" 


a 


\ 


P 


hi 


P 


A^y piede o( mavkup 七 ha 七 don-tains 
o 七 lie\r mavkup. <VJ> is 七 he pav-cir\*t o( 七 lie 
七 c% 七 'Wcbvillc Tvcc Favw» w > and <K 七州 l> is 
*tKc pav-cn*t o( *tKc <bodiy> clcmcrrt. 

Also kr»oy/ir\ as ： pav-cn*t clcr»f»cir\*t> pav-c^*t r\o&t- 



dliild- A^y fiede o( mav-kup is 
do 灼七 3mcd by anot^cv- piede o-f markup. 

TKc w ttcaa First HTML witK C££ f 

)(ttTA1L w is *tiic tW\\d o( *t^c <a> element 
a^d *tlic <^>s in *tVis mav-kup av-c 
dKildven o( 七 he <body> element- 
Also krvoy/h as ： dKild node, dKildv'Ch. 


bv^hdK. A bvaMii is a dolled-bion 
o-f demerits dnd doirtcirt. £o *tiic 
body w brandli is all 七 he elements 
and 七 c / •七 undev 七 he <body> 

element \y\ tKc *brcc. 


Voo*t dcnacrrt. TKc element 
•m a diodumen-l 七 ha 七 dorrla.ms dll 
。七 hcv clcmcrrts. |n HTML, 七 lie 
voo*t dcmcirt is always <ivtw»l>- 
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the document object model 




Now that you’ve got a handy Web Dictionary, it’s time to put it to use. 
Below is the tree view of the HTML we looked at a few pages back. 
Your job is to take the different tree magnets from the bottom of the 
page, and attach them to the right parts of this tree. Be careful: some 
parts of the tree may have more than one magnet that could apply, 
and you won’t need to use all the magnets. Good luck! 
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order matters 


/■ \ 

Back to that tree version of the HTML... why did the 
welcome text in the <p> element get broken into more 
than one text node? WouldiVt it be easier to use just 
one node, and not two or three? 



円中 hack io 



Order matters to the web browser. 

When the browser gets your HTML and 
represents it as a tree, the browser has to keep 
up with the order of text and elements in the 
markup. Otherwise, paragraphs could appear 
in the wrong order on the page, and the wrong 
words might be bolded or underlined. 

Let’s take another look at the markup for the 
welcome text: 


Tiieve’s 七 e 
d bit o-f 七 e % 七 


2./S io 

scc Jchhys 
about 


<P> 


y/rtiVm 七 <y>^- 


Hearts tKc 

element 

i\\t \>av-cv^t o( 

dll *tWis 匕 oyvtcrrt 


Welcome to the Webville Tree Farm. We're still 
learning about CSS, so pardon our plain site. We 
just bought <a href= ^~ - ^ . 

"http: //www. headfirstlabs . com/books/hfhtml/"> e as ah <a> 

Head First HTML with CSS & amp; XHTML</a>, ^caics a li h k. 

though, so expect great things soon. 

</p> 

The <a> element Kas some 


七 wt of its 


own, 


also. 
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The tree has to match the HTML exactly, or people 
looking at the web page could get really confused. 

This tree, for example... that <p> has to know 
exactly where its child <a> element goes, and how 
the text fits around that. 



In this case, the easiest way for the brotvser to keep up 
with the ordering of the text and link in the HTML is 
to put the first part of the text in one node under the 
<p> element, and then add the <a> element node, and then 
add one more text node, with all the text after the <a>. 
When you look at the tree view of an HTML page, you 
usually just read it from left to right, like this ： 



〜 is a mouih-Pul. 
'i thctk ou-t the 
丄吵〜 below, -thch 

_y... you ; || n/ 




The ^v-st <^f 
七 吖 *to 
<a> eleme 此 * S 
-fiv-st tWild 
七 V\e <\» element 


This ic ^ is ^ ^ild o-f the < a > 
r»ot ihc <p> clcmcht 


This last bit o( 七 C % 七 tomes 
a*f 七 ev <a> element, so it's a 

sepavate 七 ^odc u^dev- -tKc < ? > - 
I 七 s*t3V**ts tommS V * 吵七 

a-ftev- tKc 七 m 七 he <a>. 



丁 iieire's cvcr» a s^att ai iKc e^d o( 
this s\v\tt tlicvc^ a spade bdove 
<a> dcrwChi ih *tKc markup. 


丁 he <p> dement lias -tKvcc 
^Kildv-ch* two toc-t hodes ar>d 
Ohe dcmcht hode. 
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test your knowledge 


^^Just Po It - 

It’s time to load markup trees into your brain. Below is a simple HTML document. Your job 
is to figure out how a web browser organizes this HTML into a tree structure. On the right 
is a tree, ready for you to fill in its branches and leaves. To get you started, we’ve provided 
spaces for each piece of markup; be sure you’ve filled each space with an element or text 
from the HTML markup before showing off your tree to anyone else! 


<html> 

<head> 

<title>Binary Tree Selection</ title> 

</head> 

<body> 

<p>Below are two binary tree options :</p> 

<div> 

Our <em>depth-first</em> trees are great for folks that 
are far away. 

</div> 

<div> 

Our <em>breadth-first</em> trees are a favorite for 
nearby neighbors. 

</div> 

<p>You can view other products in the 

<a href=’’menu.html’’>Main Menu</a>.</p> 

</body> 

</html> 
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title 


html 


TV^'»s ov\t »s 

br\tVf See ^ 70U 

6a 的 -f'»^v-c >t out- 
氺 Hm*b H tc%t, 

a 灼 d ， *t ,s Aorb. 


Below are two binary 
tree oDtions :〃 


Our 


H de 


th-first , 


em 


iVdl look a 七 {\\t answers -to 七 his 
c^crdisc \ y \ jus*t a -few pays. 
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more markup trees 


LI: The ordering of the elements and 
text in the HTML matters, right? 

Al Yes. So for the <html> element, 
the first child is <head>, and the second 
is 〈body >■ If these were reversed, the 
tree would be different, and as a result, 
the page would be displayed differently 
in your web browser. So always be sure 
you’re keeping things in the correct order 
when you're representing HTML as a tree 
like this. 


Ql You keep talking about elements 
and text. Are those two different things, 
or is text also a type of element? 



fRGOUGNTUil ASKED 

QUESTIONS 


Ql What about attributes? You said 
that there are attribute nodes, but that 
they really aren’t “children” of the 
element they appear on, are they? 


fil Attributes are a bit of a special 
case. If you have markup like <div 
id="depth-first ">， it’s really not 
correct to say that the id attribute is a 
child of the <div> element. 

Instead, the browser stores the attributes 
of an element in a special list for each 
element. So there are attribute nodes, but 
they're not very easy to represent on a 
tree. When we look at the DOM in a few 
pages, you'll see that it handles attributes 
in a special list for each element. 


Al Elements are the names 
surrounded in brackets, like 〈 title 〉 
or <p>. Text is the actual characters 
within elements, like "Webville Tree 
Farm” or “directions”. There are also 
attributes, like id= 〃 binary 〃 or 
clas s= 〃 greentea 〃 ■ 

All of these are considered nodes, but 
elements, attributes, and text are all 
different kinds of nodes. So you could 
have a text node, but you would never 
have a text element. 


G: Don’t lots of older HTML pages 
leave off closing tags, like </p>? How 
does a web browser handle pages with 
markup like that? 

A: Boy, you’re really on top of your 
HTML, aren’t you? You’re right, lots of 
older HTML pages are pretty messy, 
and have elements that aren’t closed 
or nested properly. In these cases, web 
browsers do the best they can in creating 
a tree structure. 


Usually, the browser gets it right, but if 
you ever see a page that doesn’t appear 
quite the way you expected, it might be 
because the browser guessed wrong in 
creating the tree structure for that page's 
HTML. That’s just one more reason to be 
careful when writing HTML. 

U1 Will different web browsers all 
represent a page in the same way? 

AI If you're writing standard 
HTML—and even better, validating your 
HTML—different browsers will almost 
always come up with the same tree for an 
HTML page. This is one of the things that 
HTML 4.01 and XHTML 1.0 and 1.1 have 
provided: a standard view of HTML that 
browsers can rely on. 

If you start to get sloppy, though, and 
forget to close an element, or use older, 
outdated HTML, then web browsers 
have to do the best they can to represent 
your markup. As a result, you'll start 
to see differences in the tree between 
different browsers. But as long as you 
write standard, valid HTML pages, this 
shouldn't be a problem. 
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See? If you want to understand web 
pages, you have to master trees. 



OK, I get all this business about a web 
browser seeing my pages as trees... but 
how does that really help me? I need to 
change a web page, not grow one. 




Mike: Often, the root must be watered carefully 
before one can enjoy the leaf. 

Jenny: What the heck does that mean? 

Mike: Honestly, I have no idea. I read it somewhere, 
and thought that it might impress you. Anyway... since 
web browsers view your pages as trees, you need to be 
able to write code that works on those trees. And that’s 
where the Document Object Model comes in. 

Jenny: OK, now we’re talking. That’s what I came 



here to find out about... the Document Object Model. 


Mike: The Document Object Model —— usually called 
the DOM for short —— is how you can work on the tree 
that the browser creates from your web page. You can 
manipulate the DOM with JavaScript, and update the 
browser’s tree. And once you update the tree, the page 
itself will automatically be changed by the browser, 
without any page reloading or refreshing. 


ThevVs a jvoup called iKe 
l/Vov*ld l/Vcb Cohsoirtium 
(most people dal I tKcm 
tKc W1>C -fov slio\rt) -that 
publisKcs -tKc spedi-fidatiohs 
s-tdhdd\rds -fov -tKc 
Jus-t a bit o-f tvivia -Pov you 



S'tdhddV'ds JU\TUS OU"t "tKcVC... 
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markup tree solutions 


Back to the forest 

Remember，web browsers see your 
web pages as trees of elements, text ， 
attributes, and other markup: 



trees are great for folks that 
are far away.” 


M 、、 Our M 


、 breadth-first” 


1 depth-first" 


em 


em 


^rees are a favorite for 
nearby neighbors." 


You can view other 
products in the'' 


"Main Menu 


Below are two binary 
tree oDtions:" 


''Binary Tree Selection 


title 


body 


head 


html 


Did you jet "tKis Ohc? 

cvc\ry bit o-P -text 
•m the HT/WL Kas -to be 

CVCh puhd'tu^'tioh. 


Hcvc »s tV^C solution (o\- *tV^C 
c y.cv6sc batk ovx 2-2-1. 
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the document object model 


Browsers see the world upside down 

Of course, browsers don’t literally store a picture of a tree with your markup on 
it. If you want to really understand what the browser stores in memory, you need 
to learn about the DOM. Let’s see how the browser takes the tree you just looked 
at and represents it with objects. 

First, the browser flips the entire tree upside down so the <html> element is at 
the top of the tree instead of the bottom: 



• 也七 W»s u -to\>-dov/^ V.cv/ 
? HTML, 70U ^ see 

code's elewe 此 

^ av>7 tWild easily. 


/“ we b p ， 知仏咖 


html 


head 




body 


title 


Binary Tree Selection 


BvCh ^KoU^li y/C 
flipped "the brcc ovcv* 
wc still move -py-om 
Id't-'to-irigh'fe whch 

we ov-dem rvodcs. 


H Main Menu" 


' Below are our fine 
binarv tree ootions ： 


''You can view other 


roducts in the 


Our 、、 


trees are a favorite for 
nearby neighbors .〃 


em 


em 


deDth-first 


' breadth-first" 


Our 、、 


' trees are great for folks 
that are far away.” 


<dw>, Woka u— seveval 


r^odts b> ^ tV'C cm^as»z£d 
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dom trees up close 


A new type of tree ： the DOM tree 

Once the browser has your markup with the <html> element at 
the top, it creates a new object for each node in the tree. The result 
is a bunch of objects, all “connected” together, like you see here: 


IA/cvc di-UKcd tKc brtt %wre 

you vc jo*t 七 he idc3 by now. 



Al^oujV> t^is does〆 七 look like a *br« 
a^ort, you tayv still see rooi, bv-a^t^cs, 
dytd leaves, jus-t like oy\ 2*2^ 
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is -the v-oo-f ： 

clcmcht o( -the 

Vo/\/l -tv*cc. 


This tY\hrt is usually called a 
POM -tree, because i*t represer\*b your 
doduir«Ch*t us'mg objects ar\d pvovidcs a 
brtt rwodel your markup. 



Ov-dev is still ^>vcscvvcd, as 
demits ay»a 七 c% 七 appear m 


ocattly *t^c same ov-dev- as 

do m 七 HTML markup 
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drawing dom trees 


Work It through 

Time to get your dry-erase markers out and dive into the POM for yourself. 
Your job is to take the HTML below and draw the POM tree that a web 
browser would create to represent this markup. 

<html> 

<head><title>&onna &et Me Some Blues</title></head> 

<body> 

<p>Do you have the blues? If not check out Stefan 
Grossman's <a href:”hftp:>/www.guifarvideos.com”> 

Guitar Workshop</a> for some great DVDs and 
instructional videos.</p> 
iody> 


</body> 
</html> 


Praw what you think the POM tree will 
look like here: 


S$rr 


h 七你 I 


head 


_ 
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糸 Ov\C o-f ouv- \rcvicwc\rs po*m*tcd ou*t *tha*t you do^*t 
have *bo dv-aw *tKc boxes bc-fo\rc *m *tKc eleme 的七 

y\Sn\CS. lo^ houv-s o-f *thoujh*t, wc doir^uv. 








the document object model 


PopcasflNqf 


Head Rush: We’re here with the Document Object Model, talking about 
how web browsers really see HTML, and what JavaScript programmers 
need to know to update their pages on the fly. It’s good to have you, 
ummm." Document... ummm, Mr. Model.... well, what exactly should we 
call you? 



Document Object Model: Most folks just call me the DOM. It’s an awful lot of trouble 
to go around saying “Document Object Model.’’ 

Head Rush: Oh, that is easier. So, let me get this straight. You’re what a web browser sees 
when it looks at an HTML page? 

DOM: Well, the browser starts out with HTML and CSS and JavaScript files. But web 
browsers really don’t like to work with text, which is all that those files are. It’s hard to 
apply CSS styles and JavaScript event handlers to a bunch of text. 


HeadRush ： Oh, that makes sense. Because hardly anyone puts their CSS into their 
HTML files anymore... the CSS is usually in a separate file. 

DOM: Right, and most of the time, the JavaScript isn’t in the same file as the HTML, 
either. So the browser uses me, and combines all the HTML, CSS, and JavaScript into one 
structure. So, for each piece of HTML, the browser creates an object. And I keep all those 
objects organized and connected. 


HeadRush ： I can see how that would make it easier for the browser to keep up with all 
those HTML elements. But I’m not sure I understand how CSS and JavaScript fit into this 
picture. 

DOM ： Well, all my objects that represent HTML have helpful methods you can call, and 
properties you can set. So, for example, you could call addEventListener() on a button, and 
have the button call a JavaScript function every time it’s pushed. All that is easy if browsers 
use me —— and the objects I provide —— to model web pages. 

HeadRush ： OK, I get it. So do you make it easier to change what’s on a web page, too? 

DOM: You got it. You can add a new text node to an element to make text appear, or 
remove a <div> element from its parent to make an entire section of a page vanish. 


HeadRush ： Oh, that is nice. And none of that requires reloading the page? 

DOM: Exactly. I exist in memory all on the web browser, so the browser doesn’t need to 
talk to a server or even be connected to the network to use me. 


HeadRush ： Wow, that’s pretty sweet. I’m looking forward to getting to know you better... 


you 1 re on your way ► 
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exercise so/tif/ons 


Work If Through^ Answer^ 

time to get your dry-erase markers out and dive into the POM for yourself. 
Your job is to take the HTML below and draw the POM tree that a web 
browser would create to represent this markup. 

<html> 

<head><title>&onna &ct Me Some Blues</title></head> 

<body> 

<p>Do you have the blues? If not check out Stefan 
Grossman's <a href- n http ： y/www.guitarvideos.corn n > 

Guitar Workshop</a> for some great DVDs and 
instructional videos.</p> 

</body> 

</html> 


Here's what we drew: 




V>eddi 


J 




七 rtk 


? 


f ____ 1 Po you V^ave w^ s '< ^ 

L 


P 1 


(or some yea 七 P^ s 

instvut 七 ional videos. 


and 


M-tav WovksV^oj 


I 
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the document object model 


Remember that bi£| hu^e 

POM tree we just looked at? 


ttcvc S i\\t POM brtt 

七 he HTML you looked at 
batk cm pay 2 - 2 - 0 . 



You can get to this ivhole thin^ usin^ the 
“document” variable m your JavaScript 


^SnR^oo^Iemen^of the document ■ 

You can grab the <html> root element from an HTML 
document using the documentElement property: 

var htmlElement = document .documentElement; 

is a s ?e f.al ▽ 叫汉切。 

dot^i objeti \i aUavs iKc 'root 

element POAI {xtt 


/ouW al^dy s CCh scvc^l ways ^ u ih 
如 一 ，” 一 y . h 二 w 

ver^mdevs ^ cairliev- i h ^is dhapi 饮 . 


Rerwcrwbcv, 'the voo-t elcrwCKrt ih 
HT/l/JL is always <lvU»l>. 


ind an element by its “id ，， attribute 1 

YouVe already seen how getElementByld () makes it 
a piece of cake to find an element in your web page, using 
the element’s id attribute. 丁 , . ， 

Th,s 3^ ih e c \ CrnCY)i 

var manganese = ''/Wg w 

document .getElementByld ( 、、 Mg") .value; 


you re on your way 
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dom nodes 


Moving around in a DOM tree 

You already know how the document object can help you find an 
element with a particular id attribute, but there are a lot of other ways 
you can get around in a DOM tree. Since each node has a parent, and 
most element nodes have children, you can move up and down in the 
DOM tree using these connections. 


Here’s part of the DOM tree from page 226; let’s look at how you could 
move around the tree, starting with one of the <div> elements: 


dwKodc »s 

^onr\"b^^ 

•tWis 


TV^c dW.ldNodcs ”吖切 
5 wcs 70U ar. avvav o-f ail 
W ^odcs. 


^y\ jet the pavch-t o( 
tlie <div> ; wKidli is iKc <body> 
by usihj -tKc <div> 
code’s pavchi/Vodc pvopev-ty. 

J 

: entNode 


^adihj HBRB/ 

Evciryihihj i h ihis d\a^ 

s*tairts wi-th -this <div>. 



ihc <div> -that wcVc 
似喲 li^s a hodc 
objedt i h the D_ &cc. 


divUode 


lf y° u ^ ^ 9 o s^ai 3 ht 
the tWild, use the 




prop 吻 0( 七 he 


I trees are a I 
I favorite for ■ 
I nearby neighbors. /# B 


stChil^ 



<div> s hodc object 



v/ou yb -to last 
tW.ld <dw> ^ 
lastCW.Id ?v-o^vt7- 


x/ou 6ould use <c^> 
^dics ^stCW.ld, lastCW.ld, 

饮 dW.ldNodcs ^o ? cvt7 to 

yt "to *t^ ,S 七以七 ’ 
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the document object model 


Sweet! Now I can find any element I want, move up 
and down the DOM tree... I’ll bet I can get element 
names and text values, too, right? 



The node knows... pretty much everything. 

Remember, everything in a DOM tree is a node. 
Elements and text are special kinds of nodes, but 
they’re still nodes. Anytime you have a node, you 
can get the name of the node with nodeName, 
and the value of the node with nodeValue. 

You’ve got to be careful what type of node you’re 
working on, though, or you could end up getting 
a null value when you’re expecting the name 
of an element or a string of text. An element 
node has a name, like “div” or “img”，but won’t 
have a value. And a text node won’t have a 
name, but it will have a value: the actual text 
stored in the node. 

Let’s take a look and see how this works: 


node node type wodeName nodeValue 




''breadth-first'' 


element 

node 


element 

node 


text node 


-- ► 

f 

Element 灼 odes aH 

—— V - ► 


wull/uwdefiwed 

条 〕“ 。dc is Uhd ^ jhcd 

wull/uwdefiwed 


r\odes do Y\o- 
d hodc/Vamc. 


飞 

null/undefined 



TKc nodc\/aluc 
of a i\o&t 
is i*U 


€€ 


breadth-first" 
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^Just Po It 

You’ve got to keep up with what type of node you’re working on, and always know where 
in the DOM tree your variables are pointing. To help you get some practice, here’s a bit 
of JavaScript code, and some HTML. Your job is to figure out what each alert () prints 
out. Try this first without running the code on your own... but don’t be afraid to type this 
code in and test it out for yourself if you get stuck. 

function guess () { 

var whatAml; 
var element = 

document.documentElement.lastChild; 
alert (''I am a、' + element. nodeName); 
var anotherElement = 

document • getElementsByTagName ( 、 'hl 〃） [0]; 
alert (''I am a、' + anotherElement. nodeValue); 
var child = anotherElement .firstChild; 
alert (''I am a '' + child.nodeValue); 
element — 


叫 * ^ i() 
oui 卜 ... 



document. getElementByld ( 、 'tiger〃）• 1 as t Chi Id; 
alert (''I am a '' + element. nodeValue); 
alert (''I am a '' + 
element.parentNode 

• getAttributeNode ( 、 'id") .nodeValue); 
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the document object model 



i RGOUGNTUil ASKED 

UGSTIONS 


LI 二 I understand text, and elements, and branches, 
but I’m still confused about exactly what a “node” is. 

Al Everything in a DOM tree is a node: elements, text, 
attributes, even comments. Since each piece of markup has 
some common properties, like a parent, and in most cases a 
name and children, the DOM groups these common properties 
into a Node object. Then, each different type of node adds its 
own unique properties to the common properties in the Node 
type. 

For example, element nodes have a getAttribute () 
and setAttribute () method, because only elements 
can have attributes. But element nodes get the parent and 
childNodes properties from the Node object, since that 
functionality is shared by several different types of nodes. 


But some nodes don’t have a name. What happens 
if you use the nodeName property on something like a text 
node? 

AI If you try to use a property on a node where that property 
doesn’t apply, you’ll get a value like “null” or “undefined”. That’s 
the DOM’s way of telling you that it didn’t know what you meant, 
or at least that what you meant didn’t match up with the DOM 
tree the browser created from your markup. 

So if you tried to access the nodeName property on a 
text node, you’d get an undefined value because, unlike 
elements, text nodes don’t have names. Or, if you tried to use 
nodeValue on an element, you’d get an undefined value, 
because elements don't have values. An element can have 
attributes, but any text within the element will be in the element's 
child text nodes, and not available through the element's 
nodeValue property. 
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node types 


I like most of this DOM stuff so far, but all 
this null value and undefined stuff kind of 
freaks me out. Can't I just ask the node if it’s 
an element, or text, or whatever? 



You can! (well, sort of) 

Every node has a property called nodeType, 
along with the nodeName and node Value 
proeprties that you’ve already seen. The 
nodeType property returns a number, and that 
number maps to a value stored in the Node class. 
There’s a value for each type of node, so you can 
use these values to figure out exactly what kind 
of node you’re working with, like this: 


I 乇 veW 怕 a 


•--tW you ^ dompav-c h> the 
—bm drfihcd ih the Uodt class. 



if (someNode.nodeType == Node.ELEMENT NODE) { 

// Do something with the element node 
} else if (someNode.nodeType == Node•TEXT—NODE) 
// Do something with the text node \ 


f 

Oi\tt you ky\oy/ type 

o-f you i^avc, you 
3voidi us’mg 七七 

v/ould vetum null values. 


Thcirc aire hUrhbc^rs de^ihed 
alUhc hodc iypes, 

5"t"tiribu-tcs. 
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the document object model 


Some browsers don’t recognize Node 

Unfortunately, some web browsers don’t support the Node 
class in your JavaScript. Your code won’t run, and you’re back 
to dealing with errors and null values. 


All b\rowsc\rs suppov-fc iKc 
r^odcTypc p\rocp\rty... 


...but scvcval bvov/scvs vc^ov-b ^ 
cvvov* ^cv*c- 


if (someNode.nodeType == Node.ELEMENT NODE) { 

// Do something with the element node 
} else if (someNode.nodeType == Node.TEXT NODE) 
// Do something with the text node 

} 


Internet Explorer 



Al^d lsp(a , this me^gevvhenapage conta.n, error.. 


Of 


Hide Details « 


Hearts 16 
七 V\a 七 _»七 docs^-t 
vc^o^'izjc Node 
object m youv- todt- 


Line: 8 

Lhar ； £ 


J ror: ，N ode' is und^i^ 


Code: 0 

URL： hUP：//W "^^ 


Previous 


Next 



RGOUGNTUzl ASKED 

ESTIONS 


31 So as long as my users aren’t running Internet 
Explorer, I can use the Node object, right? 


Al Actually, you shouldn’t ever use the Node object... at least 
not until all major browsers support the Node object. Even if you 
don’t think your users are running IE, it’s still the world’s most 
popular browser (by a long-shot). In the next chapter, you”ll see 
that you can get the same results with a little more work, and end 
up with code that works on all browsers. 
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the challenge ahead 


Cool! I can definitely see there are some weird 
things about the DOM, but I think Tm starting 
to get the hang of it. But what ever happened to 
that coding challenge you mentioned? 



You’re ready for the challenge... 

The DOM is a pretty big topic, and it’s 
taken us almost 40 pages just to explain 
how it works. But now you’ve got some mad 
DOM skills, and are almost ready to take on 
building a DOM app... and taking on the 
coding challenge. 

Before you do, though, check out the 
exercise solutions on the next few pages, and 
make sure you understsand everything so far. 
Then, turn to Chapter 4.5, and we’ll start 
working on a DOM app all our own. 


、 . , 

Yes, y ou 代 a d TKcv-c s a 

CV.a ? W ^ k •• 七 " 

訓 , so 6los”owr eyes, 心七 - 0 - M' 

aU femes, and Ic^s yt to tod\^ 
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the document object model 


The Great Chapter 4 Coding Challenge 

Write a feller web ^plication that usesfhe 
Document Object Model to create a dynamic 
user interface, without writing any i\jax code. 


决 0^, wc admit i*t- This dhap*tcv* jus 七 yt so bi^ 七 

y/c bv-okc i*t *m*bo *two dhap*tcvs. Bu-t 七 he ^v*ca*t Chapter 士 ^ 

Codm^ Challc^c beda^e -the ^\rca*t Chap-tcr 5 Cod'm^ Challc^c, 
dhd nobody liked *tha*t nearly as mudh. So wc dalled *thc 
Chapter 午 .5, a^d r\ow y/c dar\ still say ... 

… (dvum roll) ... 

{\\t ^rca*t Chapter 午 Cod'm^ Challc^c- I/Vho said -there douldr / 七 

be \Y\ di book? 
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solving the problem 


^^Just Po It Solutions 


You’ve got to keep up with what type of node you’re working on, and always know where in the 
DOM tree your variables are pointing. Did your answers match up with ours? Let’s take a look: 


function guess () 
var whatAml; 


丁 he dodumchi is <h-fem|>. 

Its -fivs-t dKild is <hcad>, ahd i-fe ； s 
las ■(: dhild is <body> 

2 


TKcv-c s 
O^ly or\t 
<\\l> m ttc 

dot umC 灼 "(：••• 


clcrhCh-fes 
dor /七 Have 
a hodcl/aluc. 


var element = 

document.documentElement.lastChild; 

alert (、、 工 am a + element. nodeName); - 

var anotherElement = 

document. getElementsByTagName ( 、 'hl") [0]; 
alert (、、工 am a + anotherElement. nodeValue) 
var child = anotherElement .firstChild 
alert (、、 工 am a + child. nodeValue); - 
element = 


TKc -fimst fa^d 

崎 ） dKild of 

<K/> is -the -text 

node with -fehc 
■feex-t il l 

3m 3 dow". 


>uVc used *to 
todc 
七 Wis by mvj- 



document. getElementByld (''tiger”）. last Chi Id; 
alert (、、 工 am a + element. nodeValue) 
alert (''I am a '' + 
element.parentNode 

getAttributeNode ( 、 'id") .nodeValue); 




几亡 <spa h > 

^Kild is iis i c> ，l 
whidh is 


TKc 七 c % 七 code's 
^>avc^*t 七 V>c 

clcrwCir\*t* 



You sccir\ *UV|S -fuy\diioir\ 

bc-fovc, bu 七 you tat\ -fijuv-c ii out. 
I 七 gets iKc w id w atbrib 士 … 


\ 

… whi 乩 ^ a value o( “ 七 ― " 


Did you las 七 。灼 c? Its easy *to -fov-yt 

vav-iablc is^*t \rcally a*t all! Its a Y\odt, 

d^d i*ts pa\rcir\*t is -the <spa^> element 

l-f you 七 his las*t Ime tr\AtA up a*t -the <div>, W\{\\ by\ w id” 

a*t*tv-ibu*tc o-f \{!s 0 ^ - jus-t make suv-c you u^dc\rs*ta^d 

y/hy alc\rtO p\r*m*tcd bc-fo\rc doir\*tmu*mj oy\- 
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赠 n 沾 out Ca ? \U\z3hoy. 
° h 士啪⑺七 Mmes... bvowsev*s usually 
P u t thcrh j|| uppcv-dasc. 





This jus 七 mcahs -tha-t thcv-c S h ot a 
value -fom -this pvopcvty. 



<html> 

<head> 

<title>Who Am I exercise</titles 

</head> 

<body> 

<hl>I am a cow</hl> 

<div id= 〃 ranch"> , 

I am a <em>horse</em>, but I wish 
was a <span id=-tiger->tiger</span>. 

</div> 

<form> , t _ TOI 

<input typ e = 〃 b U tton" value=^What Am I- 

onClick =,, guess () ;'" /> 

</form> 

</body> 




am a tiger 


^_^ TKc wtajl ‘ 


■feKis 


Cx C^i sc . 



/ OK^、. 



丁⑹ a 代 b 。 从 uUKc 
•tc % 七 Hornes ^y-om tv/o 
? ladcs... tv>c -tKc <_>’s 

ar.a tV)C stto^d i\st 
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more solutions 


Exercise 
Solutions 




rg/tefs 

Solutions 


Below is how a web browser would view a simple HTML page. 
We’ve added magnets to each part of the tree. See how your 
answers compared with ours. 


''Head First HTML with CSS & XHTML" 


''Welcome to the Webville Tree Farm. 

Were still learning about CSS, so 
pardon out plain site. We just bought 






'Webville Tree Farm’ 1 


All Ica-f oodles avc 
also dVild ^odcs. 

Lca-f wodcs (W 七 l^leaf 
have a^Y dKildv-c^- 




)ville Tree Farm’ 


node 


.tie 1 


parent 


a “U f ’ 

s 你叫 _ ^ 

WTMU # & ㈣ 咖呼 


lead 


9 node 


though, so expect great things soon/ 

''You can visit us at the corner of 
Binary Blvd. and DOM Drive. Come 
check us out today!'' 


av-c i\\t v-csi o-f i\\t 
a^sv/cv-s? WtW leave i\\ost up 
-to you. You ky\o>M youv- siuW... 
\nt believe m you! 


a lo-t o( eases, a hodc 
is 私 a pa^chi clc^ehi 
a dhild clcr«civt. 


>ranch 

parent 

root element 


node 


html 




，咖 sa ，士 3, 

^ hodcs ••• ^ly ai \ cas i 

仏 (rcc or 4u^. 


Rcmcmbcv, d dodumC^ 
o^ly 3 voo-t element 

a-t -tKc w voo-t w of {\\t Wtt- 
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D^Lop?Nqf POH appLfcafioNS 

A Second Helping 



Hungry for more DOM? In the last chapter, you got 
a crash course in the coolest way to update your web pages: 
the Document Object Model. We figured you might be 
wanting even more, though, so in this chapter you’ll use what 
you’ve just learned to write a nifty DOM-based application. 
Along the way, you’ll pick up some new event handlers, 
learn how to change a node’s style, and create a user- 
friendly, dynamic application. This is the chapter where we 
take your DOM skills to a whole new level. 


welcome to the next level 
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the top 5 cds app 


Everyone’s a critic 

If you enjoy music, you’ve probably got an opinion about 
what you like to listen to... and what you don’t. Let’s use what 
we’ve been learning about the DOM to build a web page for 
rating the Top 5 blues CDs of all time. 

Rather than spend a bunch of time writing HTML and CSS, 
we’ve already taken care of putting a simple page together, 
and adding some style. Open up the chap ter 04 / folder in 
the source code for the book’s examples. You’ll see another 
folder named top5, with some files and a sub-folder: 





tWs the HTML 4^ 

the Top ^ pay. 





top5.html 



vc taken tav-c o-f 
CSS 阿， -too- 


top5.css 


[IQOJ - 
... loot 



heire a\rc a buhdh o*f 

ih hc\rc, Ohe -fov- 

cadh <^f the CD dovcv-s. 






° hc do you like best? 


盯 MU and Cdooks 
\\kc a Wowser … 
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developing dom apps 


You C3 y\ dl'itk ov\ 

a^y o-f -tV^csc CP 

tovcv" images. 



©00 


a Tap S CD fetommiwdi'rians - Op«ra fl.s 




4 P./ ■'www^BJtif-iItjbi,wmifbtwia rllrjjK 1 'iPii(]teii(H ."(BpVi-feopSiJUml t 、 

CJfck wi Cl £0 cover to udd \i fo the Top 5 list 
If ywi iwont ta y+<u-t owep. cijck the 9 $fori 
CJver" button fp cfeflr the Tap 5 list, 


lurth- 





L¥f3 

m k 



國 


_ 園 B ■ 



i-A I 


My Top 5 CDs 


You cby \ dlidk w S*tav-*t Ovcv- w 
■fco move all the CPs badk 

■to the *tof o-P the fajc> by\A 

dv-ca*tc a mw list 



^ you di^k oh a 
M i 士 slioulci rhovc 
dowh ih-to this Tip 5 

l' s "ti ^9 avea. 





Could you build this application without using the 
DOM? How would it be different? 
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the top5 cds html 


Checking out top5.html 

Open up top5 . html and take a look. Most of the file is filled 
with <img> elements to display the CD covers. You’ll also see some 
instructions, a form with a button, and a few <div>s: 


<html> 

<head> 

<title>Top 5 CD Recommendations</ title> 


As usual, -this app uses 
以七 ⑽ I stylesheet 



<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href= 〃 top5•css 〃 /> 


</head> 


<body> 



i\tt& bo look 


七 hese elements 
up m ouv todt^ 


<div id= 〃 instructions') 

Click on a CD cover to add it to the Top 5 list. If you want to start 
over, click the ''Start Over" button to clear the Top 5 list. 

</div> 


<div id= 〃 cds〃> 

<img class="cover" src="images/vaughan_flood.jpg" /> 
<img class=”cover” src=”images/clapton 一 cream.jpg” /> 
<!—— Lots more images in here...--> 

</div> 


NotW” br\tV>j heve … 
jus 七 lots o( 

elements *to sV\o>n CP 


<div id= 〃 top5-listings') 
<h2>My Top 5 CDs</h2> 


tovevs 


-to tiioosc -fv-om. 


<div id= 〃 top5 〃 X/div> 
</div> 


Wcmc's wKcmc well put the 

CDs -that -the usem dhooscs. 


<form> 

<input type= 〃 button 〃 value=〃Start Over 〃 /> 


</form> 

</body> 

</html> 


We’ll ^vobdbly i\tt& *to v-ujr> some 

JavaStv 中七 We a 七 some — 七 … 
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IVhat’s the game plan? 

With the HTML and CSS already written, all that’s left for 
you to take care of is the JavaScript. Let’s figure out what 
needs to be done, and start writing some code. 


① 


TWis is 七 lc*t s dsll 


Create a new file to store the page’s 
JavaScript code. 


^ ^'»lc *to 卢 j s . 


Wc\\ Kavc io add 咖 ClidkO ev^i 


Write a function that adds a CD to ^ - 

the Top 5 list when the CD’s cover 
is clicked on. 


Ka^dlcm -to CV imaje -to 
Ka^dlc -tKis. TKch wc c^eaic a k»cw 
called addToTo^O. 


④ 


Add a ranking number to each CD, so 
users can see the order of the Top 5. 

Write a function that clears the 
user’s choices and starts over. 


The Dom flakes -tasks like this 
p^iiy easy. Wc dah put this 
亡 ode ir» addToTo^O, also. 


^ oXWtV ‘dl 饮咖 tte 0^ 

bu-tW V^a^dlc tW.s, a^d ^ 

JavaW# you II 丄 d 

tall tW.s now starWwO. 


Mh^vo it - 

Start out by taking care of Step 1. Create a new file and name it top5 . js. Go ahead and create a 
function called addToTop5 () to handle Step 2, and another function named startOver () to 
handle Step 4. We’ll write the code for Step 3 as part of the addToTop5 () function, so you don’t 
need a separate function for that step. You can leave all of these functions blank for now; we’ll fill 
each one in as we go through the chapter. 

Be sure you’ve made these changes before you turn the page, and then save your new Java Script file 
as top5 . js in the top5/ directory, alongside top5 .html and top5 . css. 


youVe on your way ► 
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top5 cds overview 


The big picture 

Did you get all of that done? Check the diagram below, and 
make sure you have all the files you need for the Top 5 app, 
and have started on the code like we have. 


Create JS file 

dd CD to Top 5 

Add CD rankings 

Start over 




V ou sW 

岭伙 / —es 加 ― • 



50CS m 

3loY\^ n / 心 "tk 
HTML- CSS 
for 如 


These "two "Puhd'tiOhs should jus*t be 
fla^cKoldcv-s -fov hoy/... y/cll -fill iKcm 
ih ovcv- iKc hwt -fey/ p^jes. 



Vouv- now Java£d\rip*t -file should 
Kavc sornc*tKmj like tliis inside it 
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top5.css 


^11 have io add Somc 
C 江 "to ihis *fi| c I 心 . 




<html> 

<head> 

<title>Top 5 CD Recommenda tions< / title> 

〈link rel="stylesheet" type="text/css" 
href="top5.css" /> 

〈script type="text/javascript" src="top 5 is" /> 

</head> ^ ^ * J f 

<body> 

<div id="i 】（ structions"> 



6\o aKead a^d add a <stvipi> dcmchi m iKc <Kcad> o( *top 弓 IvW, 
vc-fcv-vmg bo tKc hc>w JdvaSdvipt -file you dvc3*tcd- 
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event handler analysis 


Setting up the CD covers 


Create JS file 

Add CD to Top 5 

A 

dd CD rankings 

Start over 





Any time someone clicks on a CD cover image, we need the Top 5 page to 
run our addToTop5 () function. That way — once we write the code for 
addToTop5 () — the CD that was clicked on will get added to the Top 5 list. 


There are two different ways we can handle this: 


Option 1* 


Add onClick event handlers to every 
<img> element in top5.html. 


Pros: / Easy to do. Just add onClick="addToTop5 ()； ; 
to each <img> element in the HTML. 

〆 Doesn't require writing any JavaScript. 

CollS: x If you change or add images to the HTML page, you 

have to remember to add the onClick event handler. 


O^ion 2 : Use JavaScript to programmatically add 

event handlers to all <_> elements. 

PtoS : / Makes sure all images call addToTopS (), even if 
new images are added later. 

〆 The application can call the function that adds event 
handlers any time it’s needed. 

CollS : x Requires writing code instead of adding onClick 
handlers directly to the HTML. 





Which option do you think is best? Remember, after you add a CD to the 
Top 5 listings, you don’t want anything to happen if someone clicks on that 
cover again. Otherwise, you’d be adding a CD to the Top 5 that is already 
in the Top 5. Does this make a difference in how you add the onClick 
event to the CD cover <img> elements? 
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Oftioii 1: 


Add onClick event handlers to every 


<img> element in top5.html. 


tWs ¥ H With 


©00 _^ 

■ KfW • CP 味，*■■申私- 


Top S CD ft«comm<ftdatiQns 


Opera 




4 P.^'"WWW 








ohClidkO hahdlevs set up 心 
心 addToTo^O when a CD 



‘ 如 CP ， s … 如 “# 

W 七 vt sfcUas 恨 or,Cl» 6 k 

⑽七 V^a^dlcv! 1^ someone cWtVs 

ov, tV^c CP to^ a^am, tV.cvc 

o^o-,^ to be some ? voWc‘" 


<img 


class="cover" 


src=’’images/shepherd—ledbetter.jpg" 

alt=’’Ledbetter Heights’’ 

onClick="addToTop5();" /> 

<img class="cover" 


src=’’images/johnson—complete • jpg- 

’The Complete Recordings" 

onClick="addToTop5();"/> 

<img class=’’cover’’ 


iVlicn tKc CO is dlidked ； 
丑 ddH 卢 0 y/ill use 
*tKc DOAI "to move *tlic 
^ovcv doy/n -to "the 7o^ 

弓 listings a-t tiiC bottom 
of 七 lie page- 


稼 7 

6 V,dk tW»s CP ⑽， 

addToTo^O Will vur 


My Top 5 Cbs 


Ovtr 


Clrck o^n a CO cover 号 ® odd it to the Tcp 5 list. 

If ymi 猶 nt 會办 ft 妒十 ow*r 4 click th»t S 令 fl 产呼 

Over" byttgn to clear th* Tap 9 list, 


^ Top ^ CO IUcomme»>d4l>on> 

0 O O 一 

' I 必 t 抑' CD w#ww " ffld **'o 


• Opcrc 8 > 


▼ 


Sl 


We better takes look at Option 2 … 



































whafs the goal 


Create JS file 


Add CD to Top 5 Add CD rankings 

Option 2 : Use JavaScript to programmaiicaTty add 

event handlers to all <img> elements. 


Start over 


^ ^ 4 Top SOD - Op«i 5-S 

^ ^ tr y ^ 獅..讓伽 to f ㈣ 《_娜邮 import 

CJfck wig C& cover to odd it to ihfi Top 5 lis^ 
If you w«nt f+art over, ctick tWa 
Over'" button to cteor Top 5 list, 


1 V 4 TC.H 


__ 睡鼸 



Wy Top 5 Cbs 


TVis "time, 'tKcirc^s ho*tiim0 \v\ 七 lie 
HTML iliat sets u^> even 七 
Ka^dlcv- -fov- *tiic CV dovevs. 


<img class= ,/ cover , 

src= ,, images/shepherd_ledbetter.jpg- 

alt =,, Ledbetter Heights" 

orxClick=^addToTop5-0 ; n ' /> 

<img class=’’cover’’ 

src="images/j ohnson—complete•jpg" 
alt=’’The Complete Recordings r, 

or‘Click=’’add TTgTop5 () /> 

<img class="cover" 


£wi Over 




top5.js 


function addToTop5() { 

// Add a CD to the Top 5 list 


function startOver() { 

// Remove all CDs from the Top 5 and start over 
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I think we should use JavaScript. When we add a CD to the Top 
5 listing, we need to remove the event handler on that <img> 
element... but then if the user clicks ''Start Over", we need to 
move the image back to the 、、 cds 〃 <div>, and then add the handler 
back. Seems like it would be easier to just handle adding and 
removing the onClick event with JavaScript. 


eoe 


Nice thinking! We can write a function that adds 
the onClick event handler to all the <img> elements 
in the “cds” div. If the CD is added to the Top 5 list, 
we’ll remove the handler, and move the <img> down 
to the “top5” div. 

But if “Start Over” is clicked, we need to put all the 
CDs back in the top <div>, the one named “cds”. 
Then we can run our function again, and add the 
handlers back to all these images. 


-the app siarb, all o( 

仏 csc elemch-b heed -to dall 

addToTop^O when tKcyVc dlidkcd 


► Top S CO Rccommcivlations - Op«ra S.S 




Click on o Cb cover to add it to the Top 5 list. 

to *tart over, click the •Start 
button to clear the Top 5 list. 


Oh … 



1 you won' 
Over" b 


mw]mm 

W 園 Vi 91 


t Top 5 CD Recomm«od«Uon» - Op«r« 8.S 




..O) 


My Top 5 CDs 


...but a CP added ^ 
To ? 弓 cvwt 

V^a^dlcv should be amoved- lA/c 
du ， 七曲七忪 sc addcd v，tc - 


\ cp //«*Mw>H4^r»tlabsxoni/boolcs/hr«»«x/chapc«f<M/topS/oopSiitml i 

Click ono CD cover to odd it to the Top 5 list. 

If you want to Start over, dick the "Start 
Over* button to cteor the Top 5 lilt. 

豔■睡驪 

努圖 El 

My Top 5 CDs 


eon 




.01 


S k is I 


F 声 # w 1 
drti- b 


CD ocw ^ add rf to The 5 list, 
f to start mr, 冰 c* the. *Start 
button -cktf the T 呼， iiil. 





mmmm 

■圓卷 fil 

mmum 


someone dlifiks u £-ta^fe 0^\ 

all "the CDs go badk up "top, 

wd -to dall addToTo^O 
•*P thcyVc thtkcd oh d 3 aih. 



My Top S CDs 
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adding event handlers programmatically 


Create JS file 


Add CD to Top 5 A 


Adding event handlers 


dd CD rankings 


Start over 


You’ve already used onClick and onChange in your HTML to assign a 
JavaScript function to an event. You can do the same thing with JavaScript code, 
and get a little practice working with the DOM, too. Let’s create a new function, 
called addOnClickHandlers (), that will add event handlers to all the 
<img> elements in the “cds” <div>. 


\ 


丁 hs Oh our ovijihal dhcdklist 

badk pa 9c 2 • 午 7, but i 仏 still 

^ o( the CDs -to be 

added io the Top ^ 


/ \dd 铷 s 

bo 


All the CD dov /的 we w 扣 i "to add 

idlers -to a^c hested ih -th c “ dds " <djv> 

function addOnClickHandlers() { 



var cdsDiv = document. getElementByld (''cds^); 


var cdlmages = cdsDiv. getElementsByTagName (''img^) 


TW»s w»H 代 W “ 於 ^ 
all clc^c^-b ” awed 

VrbWm 如 W dw. 


for (var i=0; i<cdlmages•length; i++) 


cdlmages[i].onclick 


addToTop5; 


or\dlidk W is tKc Java£dvi^t 
CVCht 七 ha 七 matdKcs Up y/i-tK 七 lie 
HTML o^Clidk cvcrrt Kandlcv-.. 


lA/c just loop ilivou^K dll 
tKc <img> elerweirts, dhd add 
^ cvchi hahdlcv- {o eadh. 


… 孙 d addToTo^ »s tV> c WW 
{p vuy> tv>at event 


G: getElementsByTagName? What’s that all about? 

Al The JavaScript document object, as well as all 
element nodes, has a method that you can run called 
getElementsByTagName (). That method returns all the 
nested elements that have the name you supplied. In this case, 
we want all the <img> elements in the “cds” <div>, so we 
call getElementsByTagName ( 、 'img") ■ Remember, this 
method only returns matching elements nested within the node you 
run the method on... in this case, that’s the cdsDiv node. 


U: What’s the difference between using the onclick 
property in JavaScript, and the onClick attribute in an HTML 
page? 

AI There’s really no difference at all. However, as we discussed 
a few pages back, writing a method to take care of setting up event 
handlers is a little more flexible... and you can call this method 
multiple times, which will come in handy in just a bit. 

Remember, the browser reads the markup in your HTML file, and 
then doesn’t use that text file anymore. It converts the markup into 
a DOM tree, so it’s reality the DOM that you’re working with here. 
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Running addOnClickHandlersO 

We need to make sure that these event handlers are set up as soon as the page 
loads. Fortunately for us, the <body> element has an event handler called 
onLoad (). We can use that to run a JavaScript function any time the page 
loads, which is just what we want. 

Make this change to your top5 . html markup: 


Be suire ahd make be 
oh ihc Iasi 
io also. 


^ HTML ? ay 
• 4S loaded m a 


<html> 

<head> 

<title>Top 5 CD Recommendations</title> 
〈link rel="stylesheet" type="text/css" 
href=’’top5.css" /> 

〈script type= 〃 text/javascript" src="top 5 is 
</head> J 

<body^onLoad=-addOnClickHandlers();"> 

<div id="instructions"> 〜 


/> 


LU — ^dToTopW will 



fRGOUGNTUzl ASKED 

UGSTIONS 


onClick, onChange, and now onLoad... where are all these 
event handlers coming from? You seem to be pulling them out 
of thin air! 


LI I Isn’t there an addEventHandler() method that would be 
better than working with the onclick property directly? 


AI Don’t worry if you’re not familiar with all of these event 
handlers... you can look them up in any good JavaScript reference. 
Now that you're starting to work with JavaScript more, you’ll start 
to learn about the different event handlers, and what each handler 
does. For now, just trust us... and be on the lookout for Head First 
JavaScript, where you’ll get the full scoop on event handlers. 


Al addEventHandler () is a method that you can use to 
add event handlers to elements, and works in a similar way to the 
onclick property. However, addEventHandler () isn't 
supported on Internet Explorer, while the onclick property works 
on all modern browsers. Need we say more? 

By the way, the property is “onclick”，not “onClick”. If you use 
anything but lowercase letters, you’ll get an error, so use only 
lowercase when you’re typing event handler properties like this. 
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moving a dom node 


Adding a CD to the top 5 

Now that clicking on a CD cover runs addToTop5 () 


Create JS file 


Add CD to Top 5 


Add CD rankings 



Start over 


it’s about time to 


get that function working, isn’t it? When a CD is clicked, we need to move 
that CD from the “cds” <div>, near the top of the screen, down to the 
Top 5 listings. Thanks to the DOM, though, this should be a piece of cake. 


Let’s start by looking at a bit of the DOM tree for top5 . html. 



W batk or, 
Woy/scv- takes tV^.s HTML 

a ” d 七 —t ‘舳 _ “ 



’top5.css" /> 


<html> 

<head> 

<title>Top 5 CD Recommendations</title> 

〈link rel="stylesheet" type="text/css 〃 href: 

</head> 

<body> 

<div id=’’instructions"> 

Click on a CD cover to add it to the Top 5 list. 

If you want to start over, click the ''Start Over" 
button to clear the Top 5 list. 

</div> 

<div id="cds"> 

<img class="cover" src="images/vaughan_flood_jpg" /> 
<img class=’’cover 〃 src= 〃 images/clapton_cream. jpg" /> 
<!-- Lots more images in here … --> 

</div> 

<div id="top5-listings"> 

<h2>My Top 5 CDs</h2> 

<div id="top5"X/div> 

</div> 

<form> 

〈input type= 〃 button 〃 value=〃Start Over" /> 

</form 〉 

</body> 

</html> 


TWis is 七 
u mstv-ut*tio>r\s w 

<dW> •- v/cVc 
v/ovvied dbou 七 i 七 

灼 ov/. 




avt 


17, 之 ㈣ > 




TW»s »s i\\t "tds 

is y/\icvc tKc 12 - CP 
toiler im3JCS 七 o u 七 . 


is -the 

<-Po<rr»> wi-th 
but-to h j h j£ 



form 

This 


\A/W»6^cvcr CP 6Vl6kcd 

y^ccds -bo move ^ 




OTi 


“*to 卢 " <div>, v/^cv-c 
七 he <imj> o-f iiic dlitkcd 
oy\ CP d.ovcv- should Jo. 
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After addToTop50 runs... 

When someone clicks on a CD cover image, addToTop5 () will run. We 
want that JavaScript function to take the <img> element that was clicked 
on, and move it from the “cds” <div> to the “top5” <div>. Here’s what 
the end result should look like: 


M 七 ev addToTo^O vu^s -fov 

-fivst CP dicktd, -tlic 


POM Wtt should look like 七 Wis. 



<imj> is moved, its lo^JCV 

-tKc w 6ds w <div>. TKai means 妞 a 七 i 七 
w disap^cav-s w -fv-om *tKc o-f *tKc pay- 


The <irv*3> clcmch-t is k»ow UK»d 饮 
七 h U -top^ w <div>, ahd will show 
u f "feKc bo-fe'to»»» of "tKc pdge. 



这货 AAM _ 

What do you think will happen to the web page when the <img> 
element is moved from the “cds” <div> to the “top5” <div>? 


youVe on your way ► 
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the “this" keyword 


Pay attention to “this” 

The first thing we need to do is figure out which <img> was clicked on, so you can 
add the right CD cover to the “top5” <div>. JavaScript lets you know what part of 
the DOM tree called your function through a special keyword named this. 

Take a look and see how the this keyword works: 



Oi\tt tW»s toAt 


A user clicks on the 
CD cover image, 
represented by an <_> 
element, in top5.html. 




The <_> element runs 
its onClick handler, the 
addToTop5() function in 
the top5.js JavaScript file. 



function addToTop5() { 

var imgElement = this; 


// More JavaScript code... 



The “this” keyword points 
to the <_> element 
that called addToTop5(), 
and is available to any 
code in addToTop5()_ 
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Finding the “top5” <d\y> 


Next, let’s get the “top5” <div> element from the 
browser’s DOM tree. You’ll need to add the <img> 
element that was clicked on to the “top5” <div>, and 
then remove the <img> 5 s onClick handler, so it no 
longer runs addToTop5 () when it’s clicked. 


Hov, y°^ 9°-t the CD 

^ < div > 
hccd ^ he 6ov C ^ ^ 


function addToTop5() { 

var imgElement = this; 
var top5Element = document. getElementByld (''top5^); 



you 1 re on your way ► 
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adding child elements 


Create JS file 


Adding children to an element 

Once you’ve got the CD cover <img> element, and the “top5” <div>, 


I Add CD to Top 5 Ad 


d CD rankings 


Start over 


you need to add the <img> to that <div>. There are several ways you 
can add an element to another element: 



I. You tar\ a 

Witt i\st v^odc VouVc addmj 

boi\st <aw>s ^w.ia ^： 

div • replaceNode ( img 


Z. You msert a t\odt 
behove 3y\o*t-Kcv* jr^odc \v\ 

<div> s thiWvW 

div•insertBefore(img ， 


^ You dah add a ^odtbo 
the <div> a-Picv all o( -feKc 
<iKildv*Ch i-fe duv-v-ch-tly has ： 

div.appendChild(img) 


img3) 


TW»S IS i\\t <ir»»5> clem ⑶七 

^ i\\t CP tovcv ttat >was 

disked oy\ by usev-. 


Which approach do you think we should use to 
add the CP cover to the “top5” <div>? 



As you add CDs -to the Top 5 
咏 you waivt -to add hewev 
CVs b> the o( the list. 
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Back to event handlers 

You’re almost ready to write the code for addToTop5 ()... but there’s one 
more detail you need to think about. Once you’ve moved the CD cover 
image down into the “top5” <div>, you’ve got to remove the event handler 
that runs addToTop5 () when the cover is clicked on. 


eoe 


必 Top 5 CO Hecomm«f>d4lK>n> - Op«r« 8 5 









Click ono CO cover to ocid it to the Top 5 list. 
If you want to Start over, dick the "Start 
Over* button to clear the Top 5 


鏊圃_11 

V ■ E i. 



sddToTo^O will move 
仏 e CD dovcv image -fvom 
仏 eW <div> -to 
■the lowcir u -top5 w <div>. 


Out tV^C CP «s m 

Joy ^ V»st» 呼 … 

...Y/C 一七 

addH? 弓 0 心 v ■咖如 
tv> c tovcv- »s ticked ow. 




addToTopW should ohly 

w wKcir> a CD ih -the 

l dd/ <div> is disked … 

but hot wKch a CD 
already ih -feKc 

<div> is dlidkcd. 


Remember how we added the event handler? 

function addOnClickHandlers () { 

var cdsDiv = document • getElementByld ( 、 'cds 〃）； 

tteve’s 七 lie cvcrrt Kandlcv- 
〜*to vuir\. Y^ou tdv\ vemove 
七 iiis event Kandlcv- by 
settmj 七 he i^dlcv 

pvopcv*by "to null. 


var cdlmages = cdsDiv. getElementsByTagName (''img^); 
for (var i=0 / i<cdlmages•length; i++) { 

cdlmages[i].onclick = addToTop5; < - 

TWis is 七 he <\^> ele — 七 

-foV" ttc CP 6ovcv-• 



… this is iKc cvcht 
lldhdlcv hdme- 
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whafs the goal 



Code 



You’ve learned a lot these last few pages, and now it’s time 
to put all your new DOM and JavaScript tricks into action. Go 
ahead and finish off the addToTop5() function by pinning the 
code magnets into the blanks below. Be careful — you might not 
need all the code magnets. 


function addToTop5 () { 

var imgElement = _; 

var top5Element = document•getElementByld( 


top5Element. 
imgElement 


, ou -to remove cvcvvt 

v^a^dlcv- -fy-om i\\t CP 
out -.Vs m tKc To ? ^ 沾呼 . 


you add he <im 9 > 
io ihc <dlv>j 

USi ^ ° hC ^ methods you 
oy\ the las| pay. 




app0ndChilci (| 


Lis 




top5Elemen 


null 





ov 'Vewove 
6uvvcir\"t vaWe. 
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Testing addToTop50 

Be sure you’ve completed the Code Magnets exercise, and check your answers with ours 
on page 264. Make these changes to top5 . js, and then load up top5 .html into 
your web browser. Can you click on the CD covers? What happens when you do? 


0 O R 4 Top S CO • Opert S.S 



Ckk on o CD cover to odd it to the Top 5 hst. 
If you want to Jtart over, click the "Start 
Over" button to clear the Top 5 list. 


"thcvVs sc^vc^- 
Solved hcirc. All this Code is 
rurmih 3 •… yowr web bv-owsev -； wrtK 

⑽代 loads ho v-c4csh c s. 


鉍 ■ 醒 ■ 







My Top 5 CDs 


Clidk 


B Q 0 

^ Tpp 5 CO f <3pcr«i 


” ■ ■. 〆 9 »-itp 

1> r a | U .i'LHif4vi*S4i l UipS ,! !ap5 hln# — \ 






CV»tk'»^ ov\ a 

6ovcv* woves "bV'C 
jfvom tv^c CMUS b> 
心 To? 弓 V»s 七呼 . 



Click eiiq CO eewwr to !f te tht Tef 5 lisi, If 
fou mnt to jtarr eve 酽， click the p Stflrt Ovbp h 
button t-o- dcor the Tcfi 5 Ictfr. 






My Top 5 CDs 
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finshing addToTop5() 


Code 



Did you have any trouble with the Top 5 CDs test drive? If you 
did, make sure you put the code magnets in the right blanks, 
and update your JavaScript code to match. 


Solutions 


function addToTop5() 
var imgElement = 
var top5Element = document.getElementByld( 


1 _< 


Tk <img> dement was disked oh gets moved 
h> chd o-f -tKc Ai Id list. 


top5Element. 
imgElement. 


appendChild. (imgEleinent) 

onclick 



O^ct tV^c CP m tV>c 

丁 o? 弓 ， vb docs^t ” ccd a 的 
cvcrA V>ar.dlcv a^^ovc. 


Usm— 1 代 moves o 細 

idlers U o^k, so 
addToTo^O WW “ 七⑽ 
-b^e way is 


appchdChildO here 
because wc always wa^-t 
the newest CV io appear 
^ ihc chd of -the li h>^ 

<d,v> ^ a^y o-thev- CDs 

already added. 


tha| 


TV^csc arc 


j| addToT op 5 ^J M ^ 7 nsertBefo^^^^^^^^^^^^ 

replaceNode 
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Hey, you forgot to show us something... 
wheres the code that removes the CD 
from the top section when you put it down 
in the Top 5 listings? 


An element can 
have only one parent 

Take a close look at the code for 
addToTop5 () so far. First, we get the 
<img> element for the CD cover, and 
then get a reference to the “top5” <div>. 
So far, no surprises, right? 

Next, we take the <img>, and add it as a 
child of the “top5” <div>. At that point, 
the parent of the <img> is no longer the 
C cds” <div>... it’s the “top5” <div>. And 
since elements have only one parent, it 
gets moved in the DOM tree: 
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adding cd rankings 


Create JS file 


Start over 


Add CD to Top 5| Add CD rankings 


Ive been thinking about how we handle adding rankings to 
the CDs... but we don't keep up with how many CDs have 
been added to the Top 5. So I think thafs what we need 
to do first. We can just count up the number of child 
elements named 、、 img 〃 in the 、、 top5 〃 <div> / right? 



Exactly! 

And now that you know how to loop through an 
element’s child nodes and how to figure out an 
element’s name, this should be pretty easy. 


|*f youVc -fcdihj Uhsu\rc about loofihj a^d 

dKcdkihj ah dcr»»ch-t ； s peck ba^k a-t 
3dd^K»Cli^kH3hdlcv"sO oh pay 午 


Hcvc s "bV^c ^ 
Yxtvj vav'»ablc- 

Start »*t 
ou*b a*b 


Let’s add a new variable to our addToTop5 () 
function and set it to the number of CDs in the 
top 5 listings: 


function addToTop5() { 

var imgElement = this; 

var top5Element = document .getElementById(' 、 top5 〃）； 


var numCDs 


0; 



/ ou io dKcck eadh ^Kild 
dcmCht of tlic u -top^ w <div>. 


for (var i=0; i<top5Element.childNodes.length; i++) { 

if (top5Element.childNodes[i].nodeName.toLowerCase() 


\\ 


img 


n 


numCDs 


numCDs 


T 


Just bump *tKc douhtev* up 
-fov cadli CO dovcv. 


We loo ? W ^ <aw> J s 

,. 1 产七一呼 cl 一长 … " cmcwbc 7 1 
ouia fee .odes ^ just s ? ades so 

cadV) tW»ia to see ^ iVs ar. <—>• 


OY\ 


t 


女 


Code to move a CD into the Top 5 listings is here 


★ 
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developing dom apps 


Adding the ranking number 

Now that you know how many CDs there are in the Top 5, you 
can start adding a ranking number to each CD as it’s added. 
Here’s a look again at how we want the CD ranking to look. 


TV>c ,s a 

^umbcv ms.dc a bUk W, 

ovcv-la'id oy \ tV^c o-f 


七 V>c CP tovcv- way. 




TV CD dovcv is ah <\nx^> 

dhd d dKild hodc O-p 
■Bie w -top^ w <div>. 



More additions to our POM tree 

We need a text element for the ranking number. For the current ranking, 
we can just add one to numCds. But getting the formatting of the 
ranking isn’t a JavaScript thing... we handle style with CSS, right? 

Let’s create a new <span> to put the ranking in, and then create some 
CSS to style the <span> just like we want it. So here’s what we want 
the “top5” <div> part of the DOM tree to look like: 


sWld be a <s?a^> ^ 
clewed 二 

払 c <\^> <”> 〆 


■>* ■ span 


Tk Mhkmg rbd( is just a ic%i 


Thc ^ <div>. 



ttcvc avc tKc <im^> clcmcrrts 
-fov CP dovcvs. 
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css and a little more dom 


IVhat’s left to do? 



Create JS file 

Add CD to Top 5 

1 Add CD rankings 

Start over 





There are several things left to do in order to finish up addToTop5 (). Let’s figure out 
exactly what needs to be done, and then get to the code on the next page. 


① Add a new CSS class for CD rankings 

Here’s the CSS you need to overlay the ranking on the CD 
cover image, and handle the white-on-black coloring. Add 
this CSS to your top5 . css file: 


.rank { 

position : 
text-align : 
top : 

font-size : 

background-color : 

color : 

border : 

width : 

z-index : 


absolute; 
center; 

2 0px; 
small; 
black; 
white; 

thin solid white; 
2 0px; 

9 9; 



Md 恤议 ^ ㈣ • 

6SS V>cW — 广 • 


r 


Create a new <span> element and 
set up its CSS class 



Wsdl 仏 s dlass a,d sci n up so 

仏 at CD wk— will ovcv-lay -the CD dov C ^ 
leases with whi-tc-oh-bladk text 


TWis mvolvcs 70 UV 


•to 卢 .Wbwl 以 


The v*cs*t 
o-f this dll 


Create a new text node and set its 

text to the CD ranking _ _ ahreadY 3 0 七 "tKc humbev of CPs, so >wc 

jus 七 need bo add one -to tKat ； and sc 七七 ha 七 
nc>w numbev' ds 七 he du\rvch*t CD’s vankmj. 


apflics *to youv- 
addToTof^O 
JavaSdvi^*t \ -> 

■fiuhdtioh. 



Add the text node to the <span>, 

and the <span> to the <div> 丁 ., s just towcdtmj ^ ⑽如 s 

^ tv>c POM brtt } -to «,akc su^rc tv>c 
CP a\>\>cavs m tV>c 


Make sure only 5 CDs can be ^_^ 

added to the Top 5 listings wc Kave a dou^-t o( iKc CDs, 

this is a simple dlie^k -to make su^e 

tlwe mo\rc tKa^ ^ a-t a^y 
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^Just Po It - 

It’s time to fire up your text editor and finish off addToTop5(). Your job is to 
take care of steps 2 through 5 listed on the last page by adding code to the 
addToTop5() function. Think you’re ready for the challenge? 

See if you can fill in all the missing code blanks. We’ve added some notes to 
help you out. Be sure to finish this exercise before turning the page. 

function addToTop5 () { 

var imgElement = this; 

var top5Element = document • getElementByld ( 、 'top5 〃）； 
var numCDs = 0; 


for (var i=0; i<top5Element.childNodes.length; i++) { 

if (top5Element.childNodes[i].nodeName.toLowerCase() 
numCDs = numCDs + 1; 


'' 


img 


rr 


} 

if 


>: 


Makc ^ CDs tay, be 

addcd ^ ^ Top 5 I—. 


alert (''You already have 5 CDs. Click \〃Start Over \〃 to try again , rr ); 


return 


top5Element.appendChild(imgElement); 
imgElement.onclick = null; 


You havc ^ fljp ^ b ^ k ^ 

.,^ of a 外一午 

,+ y° u 3^ this 


var newSpanElement 


.className 




.createElement( 


OhC. 


used to ass ， 
a CSS tlass 


var newTextElement 
newSpanElement. 


document. 


(numCDs 


(newTextElement); 


•to av' clcwcir\t- 

1 ); 

— TKc 七 wt 30 a*t 


.insertBefore( 


2 


sKould be pa^ch-t o( 
<spa^> element? 


_ , imgElement); iKc w cir\di w o-f iKc 

<spar\> ； s Aildbr ⑶ 

TKc -fiyst "to msc\r*tBc-foveO *tKcv-c av ⑶七扣丫 ). 

is iKc v\odt {p msev-i. 
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completing addToTop5() 


Completing addToTop50 

Here’s the completed addToTop5 () function. Make sure your answers match 
ours, and then add all of this new code to top5 . js. 


Create JS file 

Add CD to Top 5 

1 Add CD rankings 

Start over 





function addToTop5() { 

var imgElement = this; 

var top5Element = document • getElementByld ( 、 'top5 〃） 
var numCDs = 0; 


、 'img” 


for (var i=0; i<top5Element.childNodes.length; i++) { 

if (top5Element.childNodes[i].nodeName.toLowerCase()== 
numCDs = numCDs + 1 ; 

W ^ CPs W 

Wmq added- 

if (numCDs >= 5) { 

alert (''You already have 5 CDs. Click \〃Start Over \〃 to try again .’’） 
return; 



var newSpanElement 


document . createElement (''span"); 
=''rank"; 


top5Element.appendChild(imgElement); 
imgElement.onclick = null; 

TWis sets i\\t 
w tlassK3w'C ， 
attv-'lou-tc 

七 <s?a〔^ewSpanElement • className 

var newTextElement = document. createTextNode (numCDs 
newSpanElement. appendChild (newTextElement); 

top5Element. insertBefore( newSpanElement , imgElement) 
} \ 

TV^C <spa^> goes bc-fov-c CP ； S <img> 
element 


All "the dvca-tc methods 
avc available thv-oujh -the 
dodumeivt object 




1)； 

Tiic should \\^t 

七 he CP 


Jus 七如 nhe i 以七 

hodc ^ ^ ^ 

<s ^ ^ild , odcs l isi 
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Testing the CD rankings (again) 

Once you’ve finished up addToTop5 in your JavaScript, fire up your web browser again. 
Load the Top 5 web page, and click on some CD covers. You should see rankings show up, 
overlaid on the top left corner of each CD cover. The absolute positioning in CSS makes 
sure these appear on top of the cover, adding a nice visual bit of eye candy to the page. 


eoo 


Top 5 CO Recommendations - Opera 8.S 


U.Ol 




1 ” 免 〆 為 9 

vww/TCJdfv»tUtit.coni/KK>oKs/N^M/(hj«it«v04/to^l/top&iilni< ▼ \ Cy., r 

»««rch P 餘 ■ 


Click on a cover to odd it to the Top 5 list. 
If you wont to start over, click the "Start 
Over" button to dear the Top 5 list. 

WSSm wn 



My Top 5 CDs 


Clidk 


Clidk 


ClkN ofi a CD cover to adkf it to> the Top 5 liaf. If 
Clidk ym want tq J+gr, pwfF. dkk thf. ■ 會 ㈣ Ow?r" 
batten ffl cl«ir thf ： Tef 5 lift. 


Koy/ tV^c CPs m ttc To\> ^ 
POM, ay^d a CSS- 
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start over 


Create JS file ^ Start over 


^^Just Po It - 

It’s time to exercise your DOM skills one more time. The startOver() function 
needs to do several things: 

1. Run through each of the children of the “top5” <div>. 

2. Any CD cover images need to be added back to the top of the page. 

3. And other elements, like <span>s, need to be removed from the page. 
See if you can fill in the blanks, and finish off the JavaScript in top5.js. 


function startOver() { 

var top5Element = document._( 、 'top5"); 

var cdsElement = document. getElementByld (''_ 〃）； 

while (_. hasChildNodes () ) { 

var firstChild = top5Element._; 

if (firstChild._. toLowerCase () == ''img") { 

_.appendChild(firstChild); 

} else { 

top5Element. removeChild (_); 

} } ThiS ° hC is a ^idky. 

• ^ - 0hdc 刈仏 c CD Covers airc b 把 k up "top, 

- ’ y ° U Should bc io di^k O, ihc. 

1 havc ^dToTo^O da || cd . 鄉 c 

仏 ⑽ ’ s a that docs that? 


Now you just need to update top5.html, and set 
the “Start Over” button to call your completed 
startOver() function: 


<formXp> 


<input type="button" value= A, Start Over" onClick= A, startOver () ; r, /> 


</pX/form> 


^ly/ays v-cmcmbcv *to 

HTML* buttons a^d demits -to 



youv- JavaS6vi\>*t todt- 
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A final test drive 

Type in the JavaScript for startOver () from the last page, and don’t forget 
to add the onClick handler to your HTML’s <input> button. Then take the 
Top 5 CD listings page for a final test drive. You should be able to click on CD 
covers, add them to the Top 5 listings (along with a nice overlapping ranking), 
remove all the CDs by clicking “Start Over”，and then do it all over again. 


006 

办 Top 5 CD Recommendations - Opera 8.5 



j New page 

4 } Top 5 CD Recommenda". ts 


iSf ▼ 

nr 

^ tp://www.headfirstlabs.com/books/hrajax/chapter04/top5/top5.html ， 

r \ Google search 

"▼ 6d 


Click on a CD cover to add it to the Top 5 list. 
If you want to start over, click the "Start 
Over" button to clear the Top 5 list. 




纖調 


變圖 E t 


My Top 5 CDs 


Hi 3 

Mmi 


□ 







Start Over 


■ 


Cou 士 y blues? t\tthr\C 
The old Vc\ia oy the back alleys ih 

Texas... pidk you\r -Pavovitcs. 
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a brief review 





戀 


Rcmcmbcv- tWis? You jus-t built a 
sl'idk >wcb a??) Vrtwt a s'mjlc Irnc 
JavaSdvi^t job! 


Po^t tWk y/cvc Id 七 asy^^vo^ous 

^VO^V'dmmm^ al*bo^C*t^CV".** >NC V*C 
vcady *to dWc ba^k m as soo^ as you 
ovcv -to C^aptcv- 5. 


Check it out for yourself! 



• The browser represents the HTML, CSS, 
and JavaScript that makes up a web page 
as a tree full of objects, using the Document 
Object Model, or DOM. 

• You can view and change the DOM using 
JavaScript code. Changes you make to the 
DOM are automatically reflected in the web 
page that the browser is displaying. 

• You can use the JavaScript document object 
to access the browser’s DOM tree for the 
current web page. 


• You can use the DOM from any web 
application, not just asynchronous ones. 

• A DOM tree is made up of different types of 
nodes: elements nodes, attribute notes, and 
text nodes. 

• Element nodes can have only a single 
parent. If you change an element’s parent, or 
add the element as the child of another node, 
you are moving the element in the DOM tree. 

• You can add CSS styles and JavaScript 
event handlers to DOM nodes using 
JavaScript code. 
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more solutions 


developing dom apps 


j^Jost Po It Solutions 


It’s time to exercise your DOM skills one more time. The startOver() function 
needs to do several things: 

1. Run through each of the children of the “top5” <div>. 

2. Any CD cover images need to be added back to the top of the page. 

3. And other elements, like <span>s, need to be removed from the page. 

oui by 5 ciii^ i^ c £ Wo 

function startOverO { < “ 卞 … Wk 邊 

var top5Element = document. C|CtEl6>tl6Ht^yld ( 、 'top5"); 
var cdsElement = document. getElementByld (、' cds "); 



while ( fop5Ele 晰 . hasChildNodes ( 「 
var firstChild = top5Element. firstChild 


y/oirkih^ oh -this <div>’s 
dKildv-Ch Uh-til none ave left. 


if (firstChild. HOdeN ⑽ 16 _. toLowerCase () 

匕 -- ^. 

CdsEUltlCIlt . appendChild (firstChild); 


—— 、 'img" 


else 


top5Element.removeChild( 


^ hodc is ah <—> 
士州以 , add iU 把 k ^ 
^ ^op of ih e p a9c ... 


firstChild 


...i-f its a <sf3n>, or 
y/^iicsfatc, or else, 

jus 七 remove i*t -fv-om 七 he f35C- 


addOnClickKandlersO 


TW,S dalis -tKc adAOX\\t^d\trsO 
YOU v/'roic earlier, 

adds tMtYxi handlers batk -to all 

GD doVCV clewed 
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5 POST 

Saying More with POST 



This is what you’ve been waiting for. You asked for it, and now 

you’re going to get it: we’re finally going to ditch send(null), and learn how to 
send more data to a server. It will take a little extra work on your part, but by 
the time you’re finished with this chapter, you’ll be saying a lot more than “no 
data” to the server in your asynchronous requests. So fasten your seatbelts, 
and let’s take a cruise through the land of content types and request headers; 
we’re in POST-country now. 


welcome to the next level 
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back to break neck 


Repeat business rocks 

Remember all the work you did on Break Neck Pizza? Well, it seems 
like everyone’s been loving the Ajax version of the pizza order form. 
In fact, Break Neck has a few new features they want to add, and 
they’re depending on you once again. Let’s see what they need. 




Ibfl New and Improved Break Meek Pizza - M-lemofl InltrnE Esiplerar 


F*i im ^tw Fjfvmm Tartfc 神 

¥ O' lil yfll gPSMif* ^ [3 


e mm 




BFB3H necu 

^ Y6 ur i 


pizza just in time 


Enter ydur pheriu nuirA^ I 
Typu y uur m dur m hurti 



Your will (leiw^rfid m 











Customers love that when they enter their 
phone number, their address appears 
instantly. Can we do something similar with 
the ''Order Pizza" button? Our customers 
just hate waiting around for onythingl 
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post requests 


Submitting a form with Ajax 

Break Neck doesn’t seem to be asking for anything that complicated. Let’s see if we 
can convert the Break Neck pizza form submission into an asynchronous request. 
Here’s what you’ll need to do: 


Youv- JavaStV-ipi -fuy\diioy\, subm'rtOvdcv-O, 



: M 
rood 


v/ill submi-t Customers ovdev- *to i\\t 
Bv-cak Hctk scv-vcv- asYy\tiiv-oy\ouslY ； us'mj 
m^ormdiio^ m i\\t fiz^a order ^orm. 


- O -： d ^ 

，- z 40 Hltpc//Mwwrh*i«frttl«b>» 


J 


an necH Pizzmm 

^r//.zv/ (Ji Your pg^a?| iJW^Wtime 


are 


Enter your phone number t2i4)290 «rt2 
Tyne your orqenn hye 

1 Lacctr Chrrar Fltta 


submitOrder() 


Lacsie Clieear F 
order of llre*d 


showConfirmation () 


</ sdriPt> 


Your order w« De de<fvereo to 


u 


Wsi, you II r^ttd bo 乩 ay^e 如 B^cak Nc^k 

TML ： ms-tcad o( a dusWc'r flatc 

ev ovdev' >Ni*bV> 3 submit button ； Oy&cc 
卜 , zz/ button should tall a ^ JavaSoft 
Voull ^>r\it tt.s m 

stc ? , a^a tall -.t s^iOrdMl 


h ihis V-II hav C {o wHtc 
" hCW da,,b ^ W-tio,. This 
x Wi，1 hccd ^ ^ delivery 

^ a tha-t 

oirdcV" is oh i*ts 


Yo 


PHP 


Break Neck server 


V^avc to make suve 

t stv'l^t OTi s 

sevvev dow’t wd ba6k 
盯 Ml* a^wovc •. ms-tcad, >*t 

Should V-cW^ ^OYi 

,t w,ll take U tv^c ^ 

avnvc at dusWcvs doov. 


<snd Imprmird HrrA Neck \ y u/A Micro«ifl Internet lK|ilorcr 


fTlIfi.fx" 
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exchanging form submits for javascript 


l Update the Break Neck HTML 

First, we need to change Break Neck’s HTML so that it no longer submits 
the form when a customer clicks “Order Pizza”. Let’s take a look at the 
Break Neck order form, and make a few changes: 


HTML Form Send Order 

PHP Script 

Callback 




<body> 


<div id=’’main-page 〃> 

<pXimg src= 〃 breakneck-logo new.gif 〃 alt=〃Break Neck Pizza" /x/p> 


〈form id="order-form" I 1 

个 

<p>Enter your phone number: 丁 ^ elemerrb no lo^jcvs needs 

〈input type:"text" size:" 14" 七 ^ w att»oy\ w ov Ve 七 hod” attv-ibu-tcs. 

name="phone" id="phone" onChange="getCustomerInfo()" /> 


</p> 


<p>Type your order in here : <br /> 

<textarea name=^order A, rows=^6 A, cols="50" id=^order A, > 


Wtrts tV^c old 


VCV-S»OV\ 




submit WtW 

c 


</ textareaX/p> 

<p>Your order will be delivered to: <br /> 

Ctextarea name="address" rows="4" cols="50" id="address"> 
</ textareaX/p> 


TW.S butu <pxinput type="button" value="Order Pizza" Uicad o( submiUi h9 | hc d]ck 

W 乩 a 呼、 - onClick="submitOrder () ;" /x/p> ^dtY Piz^ w should v-u h the Jav^io4- 

Wa </div> ^you ; || be wv-iti h9 

-type *to a <p cl as s =〃 tagline 〃>** No more waiting! Now faster than ever! **</p> 

V WW’ </ form > 


</body> 
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post requests 


HTML Form 

Send Order 

Pl 

HP Script 

Callback 






2. Send the order to the server 


Next on the Break Neck task list is writing the submitOrder() 
JavaScript function. This function needs to get the customer’s 
phone number, address, and pizza order from the order form, and 
send them to the placeOrder.php script on the Break Neck server. 
The callback function you’ll write will be named showConfirmation(), 
so be sure to tell the browser to run that function when it gets a 
response from the server. 

And, to add a little twist to this puzzle, you can use each code 
magnet as many times as you need... or not at all. You may also 
have to use more than one magnet on the same line. 


function submitOrder() 

var phone = _ 

var = 


\\ 


phone"). 


.getElementByld( 




ff 


).value 


var order 
var 


• getElementByld ( 、 'order〃）• 


placeOrder•php?phone =〃 + 

''&address =〃 + 
、 '&order=" + 


(phone) + 
(address) + 


(order); 


url 



+ '、& dummy 
. open (''GET ’’， 


request. 


request.send( 


showConfirmation 



决七 ： TKc same fcvson, >witK tKc 
same pKohc and address, mijKt pladc 
tKc same ovdev move oiadc. 
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placing the pizza order 


HTML Form 

Send Order 

HP Script 

Callback 





Code 



lUagnets 

Solutions 

.. 1 


Next on the Break Neck task list is writing the submitOrder() 
JavaScript function. Here’s where you should have placed the 
magnets to get this function working. Be sure you don’t have any 
extra parentheses on your callback functions, and double-check all 
your dots between terms like “document” and “getElementByld”. 



function submitOrder() 
var phone 
var 


document 
documei 

document 


qetE^mentByld | 


(''phone”）• 


tE 1 emen tByl 


var 



eiElementByld (''order^J 


I + 


、 placeOrder.php?phone 

' 、 &address =〃 + 
''&order=" + 



request. serin 


P，d 7 CU yt tw.s? We ^ 
Wo^s V.kc 0 ? ca a.d 

It ^ 6atW , 吒 a m 

^ 3 SC dUS-towCVS "to ovdcv* 
如 saw twm ” ⑽铷办心 . 


Make suire you did^-t add 
pa 咖仏⑽ a Uhc ⑶ d d 仏以 aw 

o*f your dallbadk 


： IOh. 
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post requests 


^Just Po It - 

It’s time to make Break Neck an even better place for ordering pizza. Look 
in the chapterO5/breakneck/ folder in the book’s examples, and you’ll 
find the latest version of the Break Neck app, complete with HTML, CSS, 
and PHP. You’ll need to open up pizza. html, and change the form to run 


submitOrder () when “Order Pizza” is clicked, instead of submitting directly 
to the placeOrder. php script on the Break Neck server. 


As long as you’re making improvements to Break Neck, go ahead and move 
all of the JavaScript out of pizza. html. You can use ajax. js, which 
you wrote in Chapter 3, for creating the request object. Then, create a 
new Java Script file called pizza. j s. Move your Break Neck functions —— 

getCustomerlnfo (), updatePage (), and submitOrder () — into 
this file. Don’t forget to add <script> elements that link to these files in your 
HTML! 


Be sure Y ou 奶以 

vtvsio 灼 of you 

dveated 七 just 

OY\t V-C<\UCS*t object … 

v/e do〆 七 *t>wo 
ve'ues 七 m 
七 Wis Laptev. 


Once you’ve done all of this, flip to the back of this chapter, and check page 
314 to make sure your files look the same as ours do. Once you’ve got that done, 


HTML Form 


Z. Update placeOrder.php 

You’re moving along pretty quickly now! Let’s get our old pal Frank to update 
his PHP script. It doesn’t need to send us back a bunch of HTML anymore. 


Send Order 



llback 


Team Chat: Changing Break Neck’s PHP script 



Jim 


.... ."^r 1 


Jim 


Hey again, Frank, I’ve got another PHP request. 


No problem. Any excuse to write more code … 


Can you make a change to placeOrder.php? It still 
needs to place the pizza order, but I don’t need it to 
return an HTML page anymore... 


jQ, 

、尹 j/ 

▲、' L 

Frank 


can you just send back how long it will take for the customer to get their pizza? 
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on the server side of things 


HTML Form Send Order 



m^mlrnce 


Frank hardly took any time in updating the placeOrder.php script. It still places 
an order, but now it doesn’t need to return any HTML. Instead, it just gives an 
estimate for when the pizza will arrive at the customer’s front door. 

< ?php hahd| k S T 9 3 Pfff> ^ 

/ ,, C ^ C [ ahd deliveir 7 sped. We 

include (''order . php^) ; ^^ z those, but all -these -fi| cs t 

include (''delivery • php") ; < ' book’s downloadable examples 

TV>csc just jet 
七 vc<\ucs*t data- 


Wo 灼 ’t look 
9lre '^ded ir> -the 


// Error checking 
$order = $_REQUEST['order 
$address = $_REQUEST['address 
if (strlen($order) <= 0) 、 

header (''Status : No order was received. 


ress A ]; 




true A 


Makc SU}rC WC ^ oi ^ 
如 empiy siHh3, 

400); 


w w 


TKis mdkes 
suv-c an 
addv-ess >was 
chtcv-cd- 


0 cho 

exit; ’ ^ ^ f 厂 b b — ，⑻心 W ， 心七 W ode J |ess 

W is s ：7 .s f o，e ^ S_. By a b„ k t J 

匕 onred s-tatus Code Will be 代 poirted by ‘sc b^owsc^s. 


〆 - ^ 

if (strlen($address) <= 0) 、 

header (''Status : No address was received. 

echo、'、'; f 

exit; TKis 奶 ds a Kcadcv badk {o iKc 

} blrowsc\r v/i^tK c\rVov message … 


rr 


true, 400); 

夕 

… and an HTTP s-ta-tus to&t mdidatmj 
tKst cvvov odduvred. 


// Place the order 

$pizzaOrder = new PizzaOrder($order, $address);<- 
$pizzaOrder->cookOrder() 

$pizzaOrder->prepOrder() 




// Deliver the order 

$delivery = new Delivery($pizzaOrder); — _ 

$delivery->deliver () ; <= _ _ _ __ _ _ 

$deliveryTime = $delivery->getDeliveryEstimate() 


echo $deliveryTime; 
?> 


TKc ovdev- is tveated, 
dookedi ； dyvd fv-c^cd 
-fov dclWcvy- 

■ 丁 k ⑶ order is sch-t 
,"to the delivery boy ; who 
takes cave o( getti% ^ 

"to the dus-fcorhcv. 


Pmally 七 ^ stvift *fmds ou 七 how lo% it 
will -take -fov piz^a *to avvivc, and 
passes i\\ai batk -to i\\t bvoy/sev. 
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post requests 



- 

There are lots of things that can go wrong when a customer uses the 
Break Neck web app. Below are several problems that might come up 
when a customer uses the pizza order form. In each of the blanks below, 
write down what you think will happen when each error occurs. 


Walt mistypes his phone number into the 
Break Neck order form, and then enters 
his address and order manually. 


Maylee enters her phone number and 
pizza order, but accidentally changes the 
street number in the address field. 


Susan enters her phone number, but 
accidentally clicks “Order Pizza” before 
she enters her pizza order. 


► Answers on page 291. 
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another break neck callback 


4. Write the callback -Function 

Now that the Break Neck PHP script just returns a delivery estimate, 
we can write a new JavaScript function to display this to the customer. 
Let’s figure out exactly what we need to do. 


W^}iav& : An HTML page with a main 
<div>, and a <form> within 
that <div> for taking orders. 


TKc <-fovm> has an id ， 
w ovdcv—fo\rnr> W , "Uiat 
use "to look <-fo\rm> 

clcmCh*t up m *tKc VOM- 


HTML Form Send Order 


PHP Script 


I Callback 



Hcvc s -the <div> 
心 W i 仏如 

一 pa〆' 

I^SI 


厂 


<dUv>- 


Bre^ii necu Pizz^m 

r<(o>rn\> - 


Your pizza 』 pu&t in ： brr® 


地 at we wW An HTML page with a 

main <div>, and an order 
confirmation within that <div>. 


TW»s is i\\t same <dw> as 
七 on^mdl ov-dev- fovm … 



...bui wc ; vc v-cpladcd 
ihe <(o^> W i-th 
& oirdev* 

亡 oivfVmaiioh. 



Replace the <form> in the 
do ： main <div> with the order 
confirmation. 

Get a reference to the <div> in the 
page, using its “id” attribute. 

% Get a reference to the <form> in the 
page, using its “id” attribute. 


3. Create a new <p> element, and add a 
text confirmation of the order to the <p> 



4. Replace the <form> element with the 
new <p> element (and its text node). 



LcVs look at tw,s stc ? rn a liUlc detail 
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post requests 


The POM is connected to what a customer sees 

Let’s take a closer look at exactly what happens 
when you replace an element in the DOM: 


Hcvcs Pom 

tree >wcVc or^. 


ttevVs y/Kat s go'mg or\ m 七 lie b\rowsc\r 
as wc change 七 lie DOM -tv-cc. 



IA/C ^Cd to 嘢 UC 如 

clc w e,t W tV>c POM W... 


•••ahd ddd "the <p> 

pladc o-f -the 
rov~irh> cleimc^'i. 




厂 


<dUv>. 


Hc\rc s -feKc <-Poirm> 

we wa^-t -to v-cpladc 
wi^tK 3r\ o\rdcv~ 
^OK>-fiirir»»a-feioK>. 



iireair neev pizzi 

—._ ^^2 ., pi£ 2 A. pusi in bn 

r<TO\rm> 


iU'#r 


This v/o”’ 七 sKo>w up m *tiiC v/cb 
bvov/sev uy\*til you vc added i 七 
m -to iKc POM iv-cc- 


Here’s the DOM tree after you’ve replaced the 
<f orm> element with the new <P> element... 


f\i tV^C tr^A oi tWis 
ovotess, tV^c 

POM *tvcc should loo^ '^ c， 


Ho. ^ <W> - 广 



All o-f -this happens wi*thou*t page 

reloads... dhd y\o y/ai-tm^ avouhdl 


< P > wiih u e 0{rdcir 

is how a|) 
hai ihc sees. 



I/Vhen the <f> vcpladcd ihc 
<-fovm> in -the PO/V] ivee, 

七 he bvoy/sev undated -the 

web fage io ma-tdli. 
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just do it 


HTML Form Send Order 


PHP Script 


參 - 

It’s time to take everything you’ve been learning in these last few chapters, and put it 
all to work. Below is the showConfirmation () callback function for the new and 
improved Break Neck pizza order form. Your job is to complete the code by filling in 
all the blanks. You’ll need to use what you know about asynchronous requests, HTML 
forms, the DOM, and error handling to get this function working. 

function showConfirmation () { 1 ~ — 丁 ^Hba^k will yt \ruh ov\tc tKc 

if (request._ == _) { scvvcv places iKc o\rdc\r, a^d vcspor»ds 

if (request._ == _) { wiili a ddivc\ry -time. 

var response = request._; 

// Locate form on page 

var mainDiv = document. getElementByld (''_ 〃）； 

var orderForm = document. getElementByld (''_ ’’）； 


// Create some confirmation text 

pElement = document._ 

textNode = document. 


、 'p 〃 


''Your order should arrive within 

+ 


minutes. Enjoy your pizza !〃）； 
pElement._(textNode); 

// Replace the form with the confirmation 

mainDiv. replaceChild (_, _ 

else { 

alert (''Error! Request status is + request. 


决 HINT: v-cpIadcCKildO takes 

two aqumch 七 s: 七 he *fi\rs 七 
is ney/ r\odt) 
and sttomd is 

tKc v\odt bo be vcpladcd. 

夕 — 



Out you tWmlc you VC 七咖 

WW, youv 如或 "Vrt“wrs 

on V\0. Tb add tVis 

you ^ ? iz^ js ^lc, and Ic^s iakc Break 

Kc6k (or a test dvWc. 
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post requests 


Test driving Break Neck 

Make sure you’ve checked your answers to the Just Do It exercise on the last 
page with ours, and made these changes to your pizza. js JavaScript file. 
Then, load up pizza. html, and let’s see how things look. 



'仏 e B … k M o 咖 js 
， Ued ，扎一 ly, i,si C ad o( 

us,h 9 ^ W submit 


Alright, let’s let the customers know 
weve made some improvements! 


The -fivsi pa\rt o-f B^rcak Heck >wovks tKc 
Sdv^e •• tus-tomcvs cyvtcv a ^o>r\C JrvUw»bcV, 
av»d scwcv sends batk *t^civ addv-css. 

tKc tusWcv- crv-tcvs m i\\t\r fiz^a 
ovdev, awd t\\tks ''Order Piz^a" 


WiiKoui cvcv Kav'mj bo see a veload, 

tus-tomev-s jet av\ ovdev- dov^vmatio 灼 

pay y/rt^ 3^v cstiw'dtcd dclWcvy t'W'C- 


FIp fdt VlnN Fflvnrf#?% TmK Hr^i 

0*«>' * . -rfoim ^ • S - 恭 

f ； 4^) UUK^/Vmn.tieaif r^tlot».i.un\ltwuft&/Yv4|«u , c)i^terO6AKe^n0j^AUd.libii 




Not so fast, Alex 
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solving the exercise 


HTML Form Send Order 


PHP Script 


^pJust Po It Solutions 


I Callback 


Below is the completed showConfirmation () callback function; make sure your 
answers match up with ours... and make sure you understand all this code. 


function showConfirmation () 

if (request. readyState 


4 


if (request. St^tUS 


200 ) 



Be su\rc you dlicdk i\)t vcady state 
bc-fovc dKcdkihj -fclic vc^ucs-t ； s s-ta-tus. 


Rc—W, 七 Wism 
sewev 

order. TV)C 
七 scv-vcv- v/»ll tc 
estimated u ^>l 
is diclWcv-cd- 


Po>r / 七 
-fov-jet bo 
add *tV\c 
七 e % 七 y\oAt 
bo tV>c <^> 
element- 一 


var response = request. respowseText 
// Locate form on page 

var mainDiv = document•getElementByld( _ 
var orderForm = document•getElementByld( 


; - TKc vc^ucs-t's vcsfonscU —es 

dcli'/cv'Y tiw'C estimate- 


us 


'' 


mam-page ") 
' order-form 


// 




// Create some confirmation text 
pElement = document. createElemcwt 
textNode = document. createTextNode 


、 'p") 


\\ 


Your order should arrive within 

response + 


'' 


tteve, >WC a vc-fcv-cirvtc -to 

<-fov*m> clcw'CVi'b 灼 odr 

use -the V0/V\ -to 
^v*ca-tc some hew ■feex-fe -fov- 

a <p> element 


' 、 minutes. Enjoy your pizza !〃）； 
pElement. appendChild (textNode); 


// Replace the form with the confirmation 

mainDiv.replaceChild( pElement , orderForm 

else { 


)； 


\ f 

TKc -fiv-st avgum ⑶七 is 七 <p> 士你⑶七 ， and 
七 he se6oy\d av-jumcy\i is iKc <-fovm> *to v-cpladc. 



alert (''Error! Request status is '、+ request. 


status 


)； 



|*f 七 he PHP sdv-ipt sends badk aw cvvov todt, 七 his will 
fV-iirv*t *tKa*t todt ou*t -fo\r dus*tomc\r *to see. 
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post requests 


r- When things go »/rong Solutions 

. 、 — 



So what do you think went wrong in each of the cases 
below? See how your answers compared with ours: 


Walt mistypes his phone number into the 
Break Neck order form, and then enters 
his address and order manually. 


Maylee enters her phone number and 
pizza order, but accidentally changes the 
street number in the address field. 


T}r)ls really \ s ^i 
ah ^o\r a-t all. 

/ 

As long as Walt typed his address correctly, 
there wowt be a problem. Hell get his pizza. 



Alex will end up delivering the pizza to the 
wrowg address! Nothing we cah do about this.. 


Susan enters her phone number, but 
accidentally clicks “Order Pizza” before 
she enters her pizza order. 


The pizza form will show an alert box with the error 
code returned from placeOrderphp, which is "400" 



I ， tW,s 6as C , status 6odc .s 

so tV>c u cls C W Wo^k ^odc m 

“C 丄 -aW() # ⑽… 


...ahd iKc usev- gets a v-cally useless cv-v-ov 
-Pvom -the v/cb -PoV~m. ^Ko ； s 0oih^ 
■to khow y/Kai C\r\ro\r todt '' 午 00” mcar»s? 



Hides ho"t 
wc 
do 

P^cvch-t 乇 his. 







Take a look at the last error, when placeOrder.php returns an error 
status code to the browser. Is there anything you could do to make 
the error message that the customer sees any more helpful? 


you 1 re on your way ► 
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response headers 


HTML Form Send Order 


PHP Script| Callba 


Wait a second... doesiVt placeOrder.php return 
an error message along with any error status 
codes? If we show that error message to the 
customer, theyll know what went wrong. 





_ 




Error messages are a good thing 

Flip back to the placeOrder. php script 
on page 284, and look at those lines at the 
top that check and make sure the customer’s 
address and pizza order were received. If 
there’s a problem, the script returns a status 
code of “400” along with an error message, and 
stops processing the customer’s order. 

But, our JavaScript callback, 

showConfirmation (), doesn’t check for an 
error message from the script; it just shows the 
request object’s HTTP status code if it’s not 
200. That’s not very helpful... 


The PHP code creates a new response header ： 


if (strlen ($order) <= 0) { 

header (''Status : No order was received. 〃， true, 4 00); 
exit; 


if (strlen ($address) <= 0) { 

header (''Status : No address was received. 〃， true, 400); 


exit 




becomes 

of iKc v-cspoir\sc Kcadcv- 

s ⑶七 batk bo bvov/sev. 




Evcv-ytli'mj 七 us: “ 

bedomes pav-t o-f tlic message 
v-ctuv-ncdi as the value o-f -tKc 
v-esponse Kcadcv-. 


V t 

TVis se^ds a status todt o-f 
认午 00 ， ’, 扣 d w *bv-uc ,) -to 

v-c\>la6c v-cs\>o^sc 

V\eddiev"s same 

m -tWis cast, tWs w StaW ， - 
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post requests 


The server talks back 

Anytime the server sends a response to your request, it can give you 
information about its response using response headers. 


TKc vcs\>ov\sc 
Kas a vcs\>o^s< 
Kcadcv called I 
w £*taW ，1 七 I 




^ Di 

re^wreHib f Kp )； I 
return … I 


Web server 


W 饮 A pa\rt o-f iKc actual 

KTTP vcspohsc -tKat tKc 

K>cdk scwc\r sehds bddk 
"to v/cb birowscV". 

/ 


H 丁丁 p/1.1 400 Bad Request 
Request Version: HTTP/ 1.1 

20 ° 0°6 2 t 77:39 GMT 

Server: Apache 
X-Powered-By： PHP/4.3.11 

status: Nn order was received. 

Connection: close 




Transfer-Encoding 
Content-Type' 


chunked 
text/html 


lode 


}y\ 


TKis favt is 
tlic w valu« w o( 

七 lie 七 us" 

response Kcadcv-. 


Tke server 
irovictes tke 
wet browser 
inlormation 

about 

response 
using response 
keacterSt 


Iwtcruct Explorer 

Firefox 

Web Browser 



Safar 


<script> 
var request. 
function foo ()J 

:一 


JavaScript 


^ Java£dv-ipt todt dar» 
adless -the mcspohsc Keadm 
thv-oujK -the v-c^ucsi objedt 


You dan addess any v-esponse 
Kcadcv -； and yt its value. 



No order was received/ 


you 1 re on your way ► 293 
























listening to the server 


HTML Form Send Order 


PHP Script 


Break Neck error handling 

Now that you know how to get a response header from the server, you can 
improve the Break Neck JavaScript, and let customers know a little more 
about any errors they run into. 

Let’s make a few simple changes to pizza. js: 


I Callback 


㈣ rr 


匕 0 dc will 八 


function showConfirmation () { 

if (request.readyState == 4) { 

if (request.status == 200) { 

var response = request.responseText; 

var mainDiv = document • getElementByld ( 、 'main-page 〃）； 

var orderForm = document. getElementByld (''order-form^); 


pElement = document • createElement ( 、 'p 〃）； 
textNode = document.createTextNode( 
''Your order should arrive within、' + 
response + 

、' minutes. Enjoy your pizza !’’）； 
pElement.appendChild (textNode); 


mainDiv.replaceChild(pElement, orderForm) 

else { - 


This 9 cts ^ ^ of 
^s P o,s C i-P h 

var message = request. getResponseHeader (''Status A, ) ; 
if ((message.length == null) 丨丨 (message.length <= 0)) { 

alert (''Error! Request status is '、+ request. status) ; 

|jp ⑽ w StaW’ 呼说 

deader, just out tKc 

故⑽仏如， 从 did b 如 dd 伙 

|jp sevvev ov a vcv-sio^s *tV>c Bvcak Kcdk 



else { 

alert(message); 


w £taW ， v-cs\>or^sc V^cadcv-, s ^ ov, 
tusWc'r- 
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post requests 


Team Chat: One more problem to fix... 


I know it seems like everything is working, but I’ve still 
got a few concerns about the Break Neck order form. 



What do you mean? Why mess with something that already works? 


L 

Frank 


Well, that’s the thing. I’m not sure this code really will work, 
at least not in every situation. You’re using a GET request 
when you submit the pizza order form, right? 



Right. All the order details get sent as part of the request URL. 


L 

Frank 


Jim 


That’s what I thought... and that’s where I think there might be a problem. 
What if someone places a really long order? Their order gets added to the 
request URL, but if that URL is longer than the browser or server supports. 


Oh, I see what Frank’s getting at. The request URL has to 
include the customer’s order, and if that order makes the 
URL too long, part of the order could get cut off! 





Oh, wow... I hadn’t thought about that. So since we’re 
adding the customer’s phone number, address, and 
order to the request URL... 



Anne 


Jim 




...everything has to fit within the maximum URL length. Each browser has a 
different maximum, and some servers have a maximum length that they’ss 
accept, to. So you just can't be too careful. That’s one of the real limitations 
with using GET requests instead of POST requests. 


Right. I can just see someone placing a huge order during the Super 
Bowl — 20 pizzas, tons of sides, drinks, snacks — and we end up blowing 
it because part of their order got cut off in the request URL 


L 

Frank 


Jim 


So we probably should use POST for our request instead of GET, huh? 
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get versus posf 


GET requests versus POST requests 

Losing part of a customer’s order would definitely be a problem for Break Neck. But, it 
looks like using a POST request might help solve the problem. 

Let’s take a closer look at both types of requests: 


GET requests send data in the request URL 

GET requests send data to the server as part of the request URL: 


placeOrder.php? Yes, I have an order for 
Mary Jenkins, at 7081 Teakwood #ZAC, 
Dallas, Texas, 75182. She wants a large 
cheese pizza with thin crust, a 2 liter bottle 
of diet coke, an order of breadsticks, and 
a side order of ranch dressing. Oh y and her 
phone number is (214) 290-8762. 


."ti. 


placeOrder.phptphone^l 4) 290 - 8762 
g-address s Mary Jewkins,7081 Teakwood 
^ftPallasJexas^^l si^order s l Urge 
Cheese Pizza with Thiw Crust2 Liter:.. 


|“ 味 T data ^ov 

七 V\c scwcv »s as pa\rt 
i\\t v-c<\ucst URU 





Web server 


^ lm an adiual request, lots o-f 七 he s^edial dKav-ad-tcvs 
•m 七 his URL would be eroded by Java£dvip*t 
csdafcO -fundtion. le*f 七 i 七 une^dodedi ； 

b> make it a little easier -to undev-s-ta^di. 
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post requests 





What do you think happens to the data in the 
GET request if the URL gets too long for a web 
browser or a web server to handle? 


POST requests send data separate from the request URL 

In a POST request, data that has to be sent to the server is kept separate 
from the URL, and there’s no length restriction: 


r 


placeOrder.php? I have the 
customers address, phone number, 
and order. I’m sending them over 
via POST, OK? 



semi wi-tK a PO£T 

^ UC5i is ^ of i^ c 
〔 ，处蚨 URL 

placeOrder:php - 


时，仏 

地 ‘ l ⑽ is 

Ch “ 心 — 
SCpa ^ C ^ U c URl 


TV^C scvvcv- i\\t 

如 POST data. 



you 1 re on your way ► 
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unencoding post data 


Web servers unencode POST data 

Once a web server gets a POST request, it figures out what type of data it has received, 
and then passes that information on to the program in the request URL. 



Sihdc tKis is s P0£T "Bicvc s 

dd-is ih -tKc a^-tual vc^ucs-t URL. 


placeOrder.php 


ho 


TV^C SCVVCV 0\>c^s ^ 

tV>c POST 代 ' 必七， 
dv>d decodes 
vccyucs't da*b3 … 



化 o 


-fov- Bv-cak 

Kctk, is {}\t tus^omev-^s 
'm-fovma*tioy\ dy\d ovdev-. 


Break Neck server 


Thc sc,rv ^ lakes of 

^3 data 

W,i h9 H 

A so^Ui， 9 a 5 崎一 
sidc P"* ， 如幻 h u Se . 



...a^d ? a ⑽如 data ⑽ 

■to ^ ^vo^vaw m tv^c 

ov-^mdl v-c*\ucst URU 


placeOrder.php 
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Send mere data with a POST request 


It looks like POST is just what we need to make sure those big orders get to 
Break Neck’s placeOrder. php script intact. Let’s update the JavaScript in 
placeOrder () to use a POST request instead of a GET request: 


HTML Form 

Send Order 




PHP Script 


Callback 


jjo 

2 •… ^otia update 


subm'rtOv'dcV'O is m pizid js. 

V 

function submitOrder() { 


var phone = document • getElementByld (''phone") .value; 
var address = document • getElementByld (''address") • value/ 
var order = document. getElementByld (''order” ） .value; 
var url = ""placeOrder.php ： jjliuiie- M I ebudpe (^hun^) 一 "‘ 


ou -(： by \rcmovih^ 
all 七 1 化 -fovm daia -fvom 
tKc \rc^ucst URL. 



fir)r\r\Tnr r~ rr 本 nncapo (addrO^ F.) + 

、 '& crrdei n " ~1— ooca]SH^(Qr^r?r )(7^ ’ ^ i \osc iliis 


ur- 4 ：~~ — url~4-- 


'\ 


&dummy 


-enocapo 

nevj Date () . gotTi mo () 


request. open (''POST", url, true); 



semi^oloh "the 

⑶ d o*f iKc lihe. 


Tell o\>c^() 

mc*tV\odi "that 
you "to use 
POST instead 

筇 T. 


request.onreadystatechange = showConfirmation 
request. send (''phone=" + escape (phone) + 

T 


Use scy\dO 
■fco scy\d 七 he 

ovdev- 

-to i\\t Bvcak 
Kctk sc\rvcv. 


&address=" + escape(address) 


&order= ,A + escape (order)); 


^ sc value pairs ih sehdt 
just like you did ai the ChC | 

J the merest URL -the 
与 £ 丁 vcv-sioir> of -this Code 


Siy\d.C v/cVc usmj 
POST, v/c 
y\eed tKis dummy 
^avamcicv- a^ymovc. 


^^Just Po It_ 

Go ahead and open up your copy of pizza. js, and find the submitOrder () 
function. Change the function’s code so that it sends the customer’s order to 
placeOrder. php using a POST request instead of a GET request. Once your code 
matches ours from above, save pizza. js, and go ahead and turn the page for some 
Q ； and-A before we take Break Neck for another test drive. 
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post requests aren’t cached 


Hold on a second... just because 
were using a POST request, caching 
Isn't an issue? I’d like a little more 
explanation than that. 



Browsers cache GET requests 

Browsers know exactly what data you’re 
sending them in a GET request... all 
the data is in the request URL. So when 
the web browser thinks a request is the 
same —— because the same data is in the 
URL —— it tries to “help out” and return 
any cached answer it has for that request. 


Internet Explorer 

Firefo 

Web Browser 

Opera 

Safar 

Mozilla 



GET request 
placing order 


TKc 七 Us A helping you... 


^ s ihc birowsc^s 


Request URL 

placeOrderphp?phone a ... 


Server Response 


showConfirmation () 


metion foo ()i 


5 


</script> 


...but it ervds u^> jWmj you 七 
sdvne daia ovcv ar\d ovcv. 


The 

makes i-t 
io the Bv-cak 
Nctk sc\rvcv. 


Eva worse, ihc scv-vcv- HBVBR 

jets -the hCw pizzj ov»dcd 



PHP script 
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post requests 


tw,s -,s a POST merest, 
i\, t Woviscv- dow’U 外 a 叫 
呼咖 S m 如 6a6Wm5 tabic. It 

st^As tV^c ^r cst 0, " 心 wa 丫 


POST request 
placing order 



TV>»S time, it's i\\t sevvev 
stv\d\^ badk a vcs^sc. 


"The P0£T Y'C^UCSrt, 
yis -to -the Break 



But isn*t the URL always the same in 
a POST request? Why doesn't the 
browser try and use its cache, if the 
URL never changes? 



Browsers hate a mystery 

In a POST request, the browser doesn’t 
know what data might be a part of the 
request, since the data isn’t sent as part 
of the request URL. Since the browser 
isn’t sure what’s in the request, it sends 
all POST requests on to their destination 
server, and doesn’t try and cache 
responses from the server. 



Browsers don’t try and 
cacke POST requests. 
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a few questions and answers 



i ReOUGNTUil ASKED 

UESTIONS 


LI : Now that we’re using a POST request, does the length 
of the data we send in the request matter? 


I’ve always heard you should send credit card 
numbers and personal information using POST. Is that not 
true? 


fil No. You can send as much data in a POST request as you 
like. So those big orders for your next bachelorette party will get 
through to Break Neck with no problems. 

LI: Is the length restriction on GET requests the only 
reason to switch to using a POST request? 

Al Pretty much. While most people agree that POST requests 
are best for submitting orders and doing other transactions that 
are “final”，the biggest reason to use a POST request instead of 
a GET request is because you can send unlimited amounts of 
data in a POST request. In a GET request, both the browser and 
the server have a maximum length for request URLs; anything 
longer than that gets ignored. 

LI : I thought that POST requests were more secure than 
GET requests? 

AI POST requests are marginally more secure than GET 
requests. There's one additional step that goes into packaging 
up POST data: an encoding on the browser, and a matching 
decoding on the server. But decrypting POST data is pretty 
trivial. Anyone who is looking to get your information can get it 
from a POST request almost as easily as they can from a GET 
request. 


AI Well, that’s more about what the request does than it is 
about security. Remember, most web programmers like to use 
POST requests for completing orders, paying for an item, or any 
other transaction that is “final”. So you’re posting a transaction, 
like you would in your checkbook. If you want extra security, 
though, then you still will want to use an SSL connection, or 
some other form of network security, for your requests. 

In the same way, GET requests are usually used to get data 
(makes sense, doesn’t it?). And since you’re almost always 
completing a purchase or transaction when you enter in sensitive 
information like a credit card number, those end up being sent to 
the server as POST requests. But it’s more about the type of the 
transaction, rather than making the request more secure. 

Ql And when you send a POST request, you just put the 
request data in the send() method of the request object? 

fil Exactly. You even use the same name/value pairs, like you 
did when adding the data to your request URL. Then, separate 
each pair using the & character. The only difference between 
how you supply the data in a POST request and the data in a 
GET request is that, in the GET request, you have to put in a ? 
before the name/value pairs you add to the request URL. In a 
POST request, you don’t need a ? before the name/value pairs, 
since you’re putting them directly into the send () method. 


If you really want to secure your request, you'll have to use a — 

secure network connection, like SSL That’s a little beyond what Q ： Thafs it? There’s nothing else we need to do? 

we’re covering in this book, though. For the most part, that’s an 

issue for the server to worry about, and not your Ajax application. ... 

fil Well, let’s take our updated Break Neck pizza order form 
for a test drive and see... 
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post requests 


Trying out POST requests 

Make sure you’ve taken care of everything in the Just Do It exercise on page 299, 
and then load pizza. html in your web browser. Go ahead and enter a phone 
number, and while the server is filling in your address, enter in a pizza order. Click 
the “Order Pizza’’ button, and see what happens. 


3 The New and Improved Break Neck Pizza - Microsoft Internet Explo 


G Back ▼ O ^ 0 [*l P Search Favorites ^ 

Address m http: //www. headfirstlabs. com/books/hra jax/chapter05/breakneck/pizza. html 


Brean hbch 

Your pizza, just in time 


Wh oh … the pladc^vdcv.php 

Jsdvip-t is ircpov-tihj ah cv-v-ov. 
j^omchow -the dus-tomevs 
>v*dev yt -thv-oujh. 


Enter your phone number: |(2~M) 290-8762 


Type your order in here: 


1 Large Cheese Pizza 
1 order of Breadsticks 
1 2-liter bottle of Diet Coke 



Your order will be delivered to 


Mary Jenkins 

7081 Teakuood #24C 

Dallas, Texas 75182 


Order Pizza 


LI 二 I tried pizza.html on Safari, and it worked just fine. Is 
there something wrong (or right) with my code? 


Al No. Safari tends to do a few things that make a POST 
request work without a few of the extra steps you need to take 
for most other browsers. The POST version of Break Neck fails 
on Internet Explorer, Opera, and Firefox, so we definitely need to 
figure out what’s going on, and fix the Break Neck app. 
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whodunit? 


Why didn’t the POST request work? 




I already told you, there s no problem 
with my script. You must have screwed 
something up in your JavaScript code. 


Jim: Are you sure? I’ll bet you forgot to change your 
script to accept POST parameters. Come on, just 
admit it! Fix the thing, and we can get on with it... 

Frank: Look, do you have a hearing problem? I’ve 
told you twice now, my script accepts GET and POST 
parameters. Are you sure you even sent the customer’s 
order and address? 

Jim: I’m positive. Once I realized how long someone’s 
order could get, I updated the part of my JavaScript 
that places the order to use a POST request. 

Frank: Well, looks like you made a mistake. 

Jim: No way. I put the customer’s phone number, 
address, and order in the send () method of my 


Ifs got to be the placeOrder.php script. 

We told open() to use POST for the 
request, so ifs got to be a server problem. 


Jim’s 七 he v-csidicw-t 

A) 办 pv*o0\rarwrwCV* 


a 七 Bvcak Wcdk. 


request object... I even double-checked. So I know the 
data’s getting to the web server. 

Frank: Well, it’s not getting to me. When my script 
gets run by the server, and it checks for the “address” 
and “order” request parameters, it’s not getting 


TK'is is pvarvk … be ⑶ 

y/Vrtm^ 3ll PHP sC.V*»^*bs 

-fov Bvcak Hctk 



Jim: Wait a second. If I’m sending the data to the 
server correctly... 

Frank: ...and I’m asking the server for the data, and 
getting nothing... 


Together: The problem must be the server! 
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post requests 


The mysterious POST data 

Frank and Jim are onto something. Remember when we talked about the server 
decoding the POST data from your request? Once the server opens up the POST 
request data, it doesn’t know what type of data it should expect... and servers really 
don’t like mysteries. Let’s take a look, and see what happens with the POST data: 



placeOrder.php 


The has idea what 
■type d daia is i h -this 
POST vc^ucst.. is i-t 



Break Neck server 




k- m d data -.t V,as, '.t 
^ ^ ?ass o, to 





placeOrder.php 


you 1 re on your way ► 


305 
























request headers 


OK, I get it. In a GET request, the data is part of the 
request URL, so it has to be just text. But in a POST 
request, you can send an image, or XML, or plain text... 
so we just need to tell the server what to expect. 



You need to set the content type 

You can send a lot more than plain text in a POST 
request... as you’ll find out in the next chapter. 

But when a server receives your POST request, it 
doesn’t know what kind of data it’s dealing with, 
unless you tell the server what to expect. 

Once the server knows what kind of data you’re 
sending, it can decode the POST data, and handle 
it properly. In the Break Neck app, that means 
passing on the text for the address and order to 
placeOrder. php... and making sure customers 
are getting their pizza once again. 


Servers get inlormation from tke 
browser using request keacters^ 


丁 Ws Wc, ^ 
POST 


sc 妗 


a 



request.setRequestHeader( 

''Content-Type^, ''application/x-www-form-urlencoded , 



Request Method: POST 
Request URI： /placeOrder.php 
Request Version: HTTP/1.1 

Host: www.headfirstlabs.com 

Keep-Alive: 300 
Connection: keep-alive 

Content-Type: 


application/x-ww 

Content-Length: 121 


w-form-urlencoded 
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七 lie request youv- 
Java£d\rip*t sends -to 七 lie scv-vcv-. 


TWis »s iV>c vc<\ucsi 

7 ou added to vc<\ucst 
























post requests 


placeOrder.php? I have the 
customers address, phone number, 
and order. I’m sending them over 
as name/value pairs via POST, OK? 




placeOrder.php 





scrvcv kyxoY/s 

oUata k — 




Pi 


re^uirenib f Kp ); | 
■function wfffrO.J 

return 

) 

?> 


Servers senct inlormation to tke 
browser using response keacters. 


T ^ c se<rv 饮 s chds badk a wp 。 咐 
Kcadcm a^d s-ta-tus code. 


Web server 


^ — 

H 丁丁 P/D 400 Bad Request 
Request Version: HTTP/1.1 
Response Code: 400 = 

Date: Wed, 01 Mar 2006 21.27.39 GM 少 

Server: Apache 
X-Powered-By ： PHP/4.3.11 _ 

Status: No order was received. 
Connection: close 
Transfer-Encoding: chunked 
Content-Type: text/html 


Interwet Explorer 

Firefox 

Web Browser 

Opera 

Mozilla 


Safar 


This is v/V>ai tV>c scv-vcv sends 
batk \p *tV>c Wov/sev. 
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content types and request headers 


Setting the Content Type 


HTML Form 

Send Order 


HP Script 

Callback 





You have to set the content type for your POST data before you send the request. 
Then, when the request is sent, the server will get the request URL, the POST data, 
and the type of data it should expect. Anytime you need to tell a server something 
about a request, you’ll use a request header. 


Let’s see how we can set a request header for the Break Neck request: 


sc-tRc^cs-tHcadcv-0 
allots you -to add 
"to 

v-cc^ucst usually 
m-tc^dcdi -fov- use by 
i\\t sewev. 


function submitOrder() { 

var phone = document. getElementByld (''phone^) . value; 
var address = document. getElementByld (''address^) .value; 
var order = document. getElementByld (''order .value; 
var url = ''placeOrder.php ”； 
request • open (''POST", url, true); 
request. onreadystatechange = showConfirmation; 


Coirteh 七 - Type" is ^ 
name -the Kcadcv-... 


request. setRequestHeader ('' Con ten t- Type 




application/x - www-form-urlencoded"); 


<^r 




request • send ( 、 'phone =, ’ + escape (phone) + 

&address =〃 + escape(address) 
&order=" + escape(order)); 




\\ 



...and iiiis is 七 lie value -fov- 
iiiai v-c<\ucs-t iicadcv-. 



This it\\s sc\rvc\r data is eroded like 
i 七 would be ih a \rc^ucst URL, just as i-P tKc 
dame as pa\rt o( a ^ET v-c^ucs-t. 


RGOUGNTUzl ASKED 

QUESTIONS 


So a request header is sent to the server along with 
the request? 

Al Yes. Any request headers are part of the request. In fact, 
the web browser sets some request headers automatically, so 
you’re really just adding a request header to the existing ones. 

G: And “Content-Type” is used to tell the server what 
kind of POST data we’re sending? 


Al You’ve got it. In this case, we’re using name/value 
pairs, and the content type for that is "application/x-www-form- 
urlencoded". That particular type tells the server to look for values 
like it would get from a normal form submission. 

U: Are there other content types I should know about? 

ft I There sure are. In the next chapter, well look at the 
content type for XML. There are tons more, and you can simply 
Google for “HTTP Content-Type” to find various lists online for all 
sorts of different file and content types. 
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post requests 


Another test drive 

Add the line of JavaScript that sets the “Content-Type” request header in 
pizza. js, and save your JavaScript. Then load pizza. html in your 
web browser, and try to enter an order again. 


I I 


New «nd Improved Drcdk Neck IHr/a Microsoft Internet f xptorer 


tie tdl Vtom r«vortes Toots 

O • O ._J i ， ^ . 5^ # Q 4 

KltpcJ^*«Mv.hn«frttfAbv(on\ftncki^«4i«zAttaKAff<16/brnalinKl^ar"iNiH 




Qco 


arean necn 


Pizzmm 

Your pi77a jtisf in time 


Enter your phone number (21^) 

Typ« your order >n hye _ 

S Laeor Pltc« 

1 Crtfcr of Bre*d vticlu 
l 2-llter bottle of Dice Colce 


Your order wipe dcwvereoto ： 

Itiftry Jenkins 

0 HM1 T ♦ 龜 Irvood i 24 C 
t>All&9 r Texas 751B2 


TV piz^a Oirdcir -fovm is wovki 


… 3 agaih. 



s / 


^nd Impnmrd Hrmk Neck \ i- U7A Micr 


CongratulationSot 
You’ve saved 
Alex’s Wtt once 
again. Pizza’s on us! 



edevs avc yt lost POST. 
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request urls and length restrictions 


But you still haven’t told me what the 
actual maximum length of the request URL 
in a GET request is. Hello? 



It’s browser-dependent 

Each browser treats URLs differently. So the 
maximum request URL length is different on each 
browser. Opera, Internet Explorer, Safari... it just 
depends on which browser customers are using. 


But \Ys really small, I guess. Like, 
just 50 or 75 characters long? 



Well, it’s not that small... 

Remember, each browser is different. But, 
for example it’s about 2,000 characters 
on Internet Explorer... that’s a good rule 
of thumb to use for other browsers, too. 
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Did you say two-THOUSAND? Are you 
kidding me? What are we expecting here, 
Schwarzenegger is gonna order pizza for 
the entire state of California? Come on... 
this is just ridiculous! 



Hmmm ■… well... umm … ■ 

OK, you got us. There are probably 
not going to be a lot of times when 
the customer’s address, phone number, 
and pizza order are longer than 2,000 
characters... even when it’s Super 
Bowl party time. 

But there are still good reasons to use 
POST requests... 


















post requests 


E>sprg§§o ^Ik 



Tonight’s overly caffeinated guests ： 

POST request and GET request 


POST: Hey there, GET, I’m surprised you’re 
still around. I’m getting so many requests these 
days that I just figured you had headed to Fiji or 
something. 

GET: Still around? Oh, I’m plenty busy. Besides, I'd 
much rather be in demand because of what I do, 
not what people think I do. 

POST: What’s that supposed to mean? 

GET: Have you actually asked anyone why they're 
using you instead of me? 

POST: Oh, you really are losing it. There are tons of 
reasons to use me instead of you. 

GET: Oh really? Name five. I dare ya’. 

POST: This is going to be fun. Gee, where to begin. 
OK, how about I'm more secure. Nobody uses you 
for sending important information, like a credit card 
number or checking account number. 

GET: (Sigh) Just because people believe something 
doesn’t make it true. You’re not really any more 
secure than I am. Any junior programmer can break 
open POST data just as easily as they can read a 
request URL. And unencoding POST data? Takes 
about 30 seconds... if you’re doing it one-handed. 

POST: OK, sure, whatever. Well, here's another 
reason to use me: you don’t have to worry about 
how long your request data is. You’ve got that lousy 
length limitation. 

GET: Yup, and if you can tell me 2,000 characters 
of text that you’re used to getting in name/value 
pairs, I'll tell you why that really matters to anyone. 
Hardly anyone sending plain old text is really going 
to need more than that for their data. 

POST: Hmmm. Well, who wants to see all their data 
in the address line of their browser? Huh? How 
about that, Mr. l-need-no-content-type? 


GET: Oh, so now it’s a beauty contest? Besides, I 
thought this was a book on Ajax. Nobody sees the 
URL in an asynchronous request, even if it is a GET 
request. I’m still waiting for that great reason to use 
POST requests... 

POST: Well, everyone knows it's just... better... to 
use POST for sending form data to a server. 

GET: Tradition. That’s all you’ve got, huh? So let’s 
mount up on horses, pull out the pantaloons, and 
start worrying about falling off the edge of the 
earth... you've got to be kidding. If everyone in 
the world jumped off a bridge, I suppose you’d be 
getting your bathing suit on, wouldn’t you? 

POST: Urggh... well... wait, wait, WAIT! I've got it! 

GET: Oh, I'll bet this will be priceless. What now? 
Did Howard Stern say POST is better? I'm sure we 
can all rely on important trend indicators like that to 
make important development decisions... 

POST: XML 

GET: Huh? 

POST: XML, big mouth. I don’t suppose you have 
much to say about that, do you? 

GET: Ahhh … well... 

POST: Yeah, that’s what I thought! You've got to 
escape each and every one of those angle brackets, 
don’t you? And what about your length limitation? 
That's a big problem with XML. 

GET: Hmm. Well, it can’t be that important... I 
mean, we’re on like page 240 or something, and we 
haven't even talked about XML yet... 

POST: Oh, you really are out of the loop. I guess 
you missed the memo buddy... wait until Chapter 
6. It’s XML central, baby, and I bet you’re nowhere 
to be found. C’ya! I hear the next chapter callling... 
I’m sure they need someone who can handle XML 
requests! 
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reviewing what you’ve learned 



B«f 


I gotta tell you, you’ve saved my butt again. 
Customers are happy, I’m getting massive tips, 
and my boss is just going on and on about Ajax. 



Reviewing How llbmm 


You’ve got a lot of tools in your Ajax and asynchronous 
programming library by now. Before you dive into Chapter 6, take 
a moment to relax, and write down what you’ve learned so far. 

In the blanks below, list some of the key Ajax concepts you’ve 
picked up in the first five chapters. 
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post requests 


Take a look at the Kiew POST version of Preak Neck Pizza 



|0OC 

1 Al ® S 

The New and Improved Break Neck Pizza 



* ^ http://mvw.headfir 5 t 3 abs.com/books/hrajax/chapter 05 /breakneck/pizza.htnil 



60 Second Review 


In a GET request, all the data you send to 
the server is added to the request URL 


■ 


The server doesn’t know what type of POST 
data to expect unless you tell it. 


Each browser has a maximum length for 
URLs, including any data included as part of 
that URL. For most browsers, that maximum 
length is around 2,000 characters. 

There isn’t a length restriction on the data 
you send to the server if you’re using a 
POST request. 

In POST requests, the data is sent to the 
server separate from the request URL 
The request URL only has the name of the 
program on the server that should be run. 

You can send different types of data in 
a POST request: plain text, XML, binary 
objects like images and files, and anything 
else that your web browser can encode. 


■ Use the setRequestHeader() method on the 
JavaScript request object to pass additional 
information on to a server. 

■ Using the Content-Type request header, you 
can tell the server what kind of data you’re 
sending in a POST request. 

■ The content type “x-www_form-urlencoded” 
tells the server that you’re using name/value 
pairs, in plain text, just as if that data had 
been submitted by a web form. 

■ POST requests are only marginally more 
secure than GET requests, and both 
require additional layers of security—like 
SSL, the secure sockets layer—to protect 
your data from prying eyes and malicious 
programmers. 
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exercise so/tif/ons 


Exercise 
Solutions 



^pJust Po It Solutions 

It’s time to make Break Neck an even 


you’re ready for 

Step 3. 

better place for ordering pizza. Look in the chap ter 05/ 


breakneck/ folder in the book’s examples, and you’ll find the Break Neck order form, complete 


with HTML, CSS, and PHP. You’ll need to open up pizza. html, and change the form to run 
submitOrder () when “Order Pizza” is clicked, instead of submitting directly to the placeOrder. 


php script on the Break Neck server. 


As long as you’re making improvements to Break Neck, go ahead and move all of the JavaScript out 
of pizza. html. You can use ajax. j s, which you wrote in Chapter 3, for creating the request 
object. Then, create a new JavaScript file called pizza. js. Move your Break Neck functions — 

getCustomerlnf o (), update Page (), and submitOrder () — into this file. Don’t forget to add 
<script> elements that link to these files in your HTML! 

^esjusi the 

sedtioh of piiz^.h-trhl. 


<html> 

，二 >， 一 d f :二===:也。 33 " /> 

<link rel="stylesheet" type="text/css nrer ■ 

: ^ipt type^text/.avascrip^ 咖 ^ 

<scri P t type^^text/javascript^ S rc=" P 咖 a.]s > </% P 

</head> 


TKcvc ; s y\o oilicv JavaSdvip*t'm 

HTML \ y \ *tiiis hCv/ vevsioh. 


Wes >/ou should 
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post requests 


var request 二 null ； 
try { 

request = nsw XMLH ttpRequest()/ 

} catch (trymicrosoft) { 

^Liuest = new ActiveXObj ect (-Msxml2 . XMLETTP ^)； 

} catch (othermicrosoft) { 

t]： request = new ActiveXObj ect (''Microsoft. XMLHTTP^ ) ； 

} catch (failed) { 
request = null ； 


ajax.js. /ou 
should have ihis -file 
-P^onr* CKap-tcv- Z. 


if (request == null) , . . 

alert (''Error creating 


function getCustomerlnfo() { - ■ 

I ， — 

request, open (''GET", url true)"^ escape (phone) 

request.onreadystatechange = updatePaao• 

request.send (null )； paarePage, 


Hcv-c av-c youv- Bv-cak 
|\/cC.k—-fu^dtions, 
you should have 七 hese 
a -Pillc called 


function updatePage() { 

if.(request.readyState == 4 ) / 
if (request.status == 200) { 
var customerAddress = reempe^ 〜 
document. getElementByld 

)else Y 1 aCtCtress ^ - value = customerAddress 

)a 1 —。: 1 响啦七咖心 ls '、+ req uest.status )； 

} 

function submitOrder() { 
var addres ： d °" Ument • ^tElementByld (^p ho ne ^)； 

] border- + escape(order); 

— t U 二 =^: rl + , : ， () ，咖 0 ; 

= — tlon; 











the return of chaos 






Injecting mischief into Break Neck 

It looks like P4 它 CTi C VIA 办系 

has another idea for breaking Break Neck. This 
time, though, they’ve stumbled onto something a 
little trickier... they’ve been doing some reading. 


318 


I ^ Atr 诎 

PROJECT ： CHAOS Wd m 
Jfoui M HttV P 




these pages will self destruct... 


Break Neck Pizza online 

Open up your web browser, and visit the “official” Break Neck Pizza site, at 

http : //www. headfirstlabs . com/breakneck/pizza. html. Then 
follow the set of instructions that 4^ VIleft 

you, tucked inside that morning paper. 


‘ 續订 ^ Uk... 

th，S — bl y 一 Wk i<p y 吻 

this ° h y ° u " Ual ^ry of pi 叫 H 



0 OO 

The New and Improved Break Neck Pizza 


◦ 


▼中 ▼ e c 

◊ ❺ http://www.headfirstlabs.com/breakneck/pizza.html ▼ 

:切 











arean fiec^p^r^P^ 

/ (' Your pizzaf j usttfkti me 


Enter your phone number: |' 11 'a' 
Type your order in here: 


s\—C 


Wry 

spaces 


Order Pizza 


TW»s v/as fecWc” 斤 2 * aM 
ojf i\^t \far\tbj settlor m tv^c 




70 UV Aoorsit^- 


Bmic\r ih -feKc s-tirahjc sc<\ue^e 
o*f dhavad-tcirs you jot 

PKOJBCT： CHfiOQ Ke^e. 


10： 


Your \ MissioiA ： 


Visif \AJ€lp Sif€. so to 

十 fUo\A^ lA\j\M^€r {kW/ 'Hw llA . 


0 二 0 


况 svjr€ 十 h silA 1 十 s 

‘卄猶 Ue^ f lAjifk \u s\\AO[k 
，岭論 U 1 U •伽 a 
flAO\A^ lAvJlM^V^ ^UN/€ 

SO\M€ "(W 

F ^ c ^ eCT ： ⑽。今 
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pom and break neck 


0OO 

The New and Improved Break Neck Pizza 




CD 


^ 0 h«p://www.headfirstlabs.com/breakneck/pizza.hitmi 

n© z 

G 

T J 

1 < 



ureaif m 


Your pizza, just in time 


Enter your phone number: |' || 'a' = 'a 
Type your order in here: 


Heve’s iKai stva^gc ^liava^icv- 

sc^uchdc you thieved *to 七 lie 
fliohc humbev* -field- 


Your order wilt be delivered to: 



Doug Henderson 

7804 Jumping Bill Lane 

Dallas, Texas 752IfiMary Jenkins 

7081 Teakwood #24C 

Dallas - "Texas 75182 John Jacobs 


Order Pizza 


© 


▼ 


Ww/rt looks like £his 
is a ,is t of All 
Z^kC 7 u S “ s/ 


ri-if 


Done 


What the heck? Suddenly all our 
customers are complaining about getting 
all this porn in the mail. They say \Ys our 
fault. That can’t be right, can it? 




a 


Actually, itjs Break Meek’s -fault/ 


Looks like youVc 50^5 


-to Kavc -to 


save *tV>c day 
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these pages will self destruct... 


Welcome to SQL injection 

Break Neck has fallen victim to a SQL injection attack, and 
now all their customers are paying for it. 



Rcwcwbcv Joe? He s 
i\^t JavaSoft 
at 


So how did this. 


Enter your phone number: |_ 丨丨 _a_ = _a 


Your order will be delivered to: 

Doug Henderson 

780^ Jumping Bill Lane 

Dallas t Texas 752ISMary Jenkins 

7081 Teakwood #24C 

C Dallas, Texas 75182John Jacobs 

c_ A l& K __ ■, B 墨 ■ ■ 

丁 WlS SUVC ’lS)r/*b ildV'mlcsS, 

七 W—.. | 七、 cvev-y tusWcv- m 
i\^t Bvcak Heck database! 


This docs^i make a lot 
SChS ^ bu-t i-t su^-c looks 

‘十 bu-t h^^less. 






What do you think happened? How could you 
prevent people from getting access to all the 
Break Neck customers’ names and addresses? 
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sql injection 


SOI. Iftspectap 


To really understand what’s going on, you’re going to have to get into a little 
SQL Below is part of the lookupCustomer.php script that is requested b 
getCustomerlnfo() when a phone number is entered into the Break neck 
form... we’ve highlighted the line of SQL that asks the Break Neck server fora 
customer based on the phone number entered into the web form. 


if ( !$conn) 

die (''Error connecting to MySQL : 



.mysql error ()) 


if (!mysql—select—db (''headfirst"' $conn)) 
die (''Error selecting Head First database : 


.mysql error()) 


$phone = preg—replace ('V [\. \ (\)\ _ ] I " > 

$select = ''SELECT 

$from =、' FROM hra j 一 breakneck ； 
$where =、' WHERE phone = $phone . 


,$ REQUEST['phone']); 


lookupCustomcv-. 

whidh you 

saw badk ih 
Chap-tcv- Z. 


J 


$queryResult = @mysql 一 query($select . $from . $where); 

if (!$queryResult) 

die('Error retrieving customer from the database . r ); 


Your job is to take this query, and then write in the special characters that 
P4(VI 办办各 asked you to type into the Break Neck 
web form. Then, you’ll know exactly what’s being sent to the Break Neck 
database... and maybe even get some ideas about what’s going on. 



SELECT * 

FROM hraj_breakneck 
WHERE phone = 4 _ 

^ ihsi 


looku P Cu S W P h P caics. 


lA/v-rbc m v/Kat you tyfcd m*to ttc 
-field V'CV'C- 
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these pages will self destruct... 



Wait, I think I see whafs 
going on here... 


s ^i -to -the B^rcak Mctk 

debase becomes... 


SELECT * 

FROM hraj_breakneck 
WHERE phone = ‘ L 》 




liitlc casicv -fco v-cad -. 


Fv-ank is ilic lead 
PttP pvogvammcv- 
ai Bv-cak /Vcdk. 



SELECT * 

FROM hraj_breakneck 
WHERE phone || ‘a ，； ‘aP 


TW,S T mcav^s W’ ^ 
a daiabasc. 


/^otid C how the sih 3 | c 

^ oics tiered ir^io 
七 h phone -field wov'k 

…仏 the quotes already 
ih £^L ^y. 



… wliidli is tKc same 
as sdyih^ -tKis... 


SELECT * 

FROM hraj_breakneck 
WHEREShone = ^ 
OR‘a ，= 甘 



TWis Vill ycUrm ^alsc -fov 
dll tUS'torirvCV'S, SmdC "t^Cy 

all V\ave a 心 one numbev-. 



Uh oK... -tKis is always -i^u^ 
(a’ is always c«\ual -to { s\ 


Hcv-c s i\\t \>v-oWcm! 


This SQL query ivill be true for every customer/ 
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protecting against sql injection 


Team Chat: SQL Injection 



Jim 



Jim 



Jim 


■ 


Jim 


So no matter what the customer’s phone number is, 
the WHERE clause is going to return true... 


.because of that part about ‘a’ = ‘a’，right? That’s always a true statement. 


Exactly. So the query returns all the customers in the 
database, instead of just the one with a specific phone 
number. I can see why everyone got upset! 


So how do we fix this? We're getting like 10 complaints a day. 


Well, I was reading about this thing called “magic quotes” in PHP. I think if 
we turn that on, it will protect us against SQL injection attacks. 


Actually, Frank, magic quotes is going away in PHP 6, and 
a lot of people don’t like that feature. It's a better idea to 
not count on features like that... take control yourself. 


Hey, I saw some JavaScript code the other day that 
validates a phone number. I bet I could add that to the 
Break Neck form, and help avoid this happening... 


...and aren’t there some MySQL functions I can use to make sure that 
this doesn’t happen? I guess that would be better than counting on some 
sort of “magic quotes” function to help me out. I’ll bet we can fix this... 


Yup. Let’s get to work. I'll take care of a little validation code, and you 
add that MySQL thingie you were talking about... 



Frank 



Frank 


’iT,-.. 

▲— L 

Frank 



Anne 


V 尹■厂 

L 

Frank 


■and we can get back to the business of happy customers and hot pizza. 
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these pages will self destruct... 


Validation 

protects your 

web 卿 from 
Kackers. You 
should 

always validate 
user input. 


Wait a second... so this is really a 
server-side problem? Why should I have 
to write more JavaScript if I didiVt cause 
the problem in the first place? 



It’s still your web application 

Sure, SQL injection affects people like Frank 
and Anne, who work with the Break Neck 
PHP, more than it does the asynchronous 
JavaScript programmers. But if something 
goes wrong, you better believe that you’re 
still going to hear about it! 

Besides, with just a little bit of extra 
JavaScript, you can really help make your 
app more secure. Validation protects 
everyone, not just the server-side guys. 



LI : I’m totally lost on all this PHP 
stuff. I thought this was a book on 
asynchronous programing! 



fRGOUGNTUzl ASKED 

GSTIONS 


So if I don’t understand what’s 
going on, what’s the point of knowing 
about SQL injection in the first place? 


U: Then this is really all about 
communication, right? Between me 
and the other people on the team? 


n: It's OK if you don’t really 
understand PHP. In fact, lots of 
programmers handle the JavaScript code 
on a web app, and then work with an 
entirely different group of people for the 
server-side part of the application. 

The main thing you need to know is that 
things can go wrong on the server. 


AI All you need to know is that things 
can go wrong... and that most of the time, 
things will go wrong. Now, you can talk 
your server-side guys, and help make 
sure nobody is getting your customer's 
addresses or phone numbers. 


Al Exactly! There are plenty of times 
you won’t know the answer to a problem, 
or even that a problem exists. But if you 
just spend a little time with the other folks 
on your team, your web app will be much 
the better for it. Along the way, you might 
even pick up some ideas about making 
your code better … like validating input... 
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improving your javascript 


Protecting against SQL injection 
一 ，in your JavaScript 


If you look in the online examples, you’ll find a folder called 

chap ter 0 5 - interlude /breakneck. This has all the Break Neck 
files, as well as a new utility file, validation-utils . js. Here’s 
how you can add validation to your local version of Break Neck Pizza: 


① Make sure you have validation-utils.js 




dc/Uc ^/ ^ 


Vd 


\ittV. njcV) f 終 


return (islnteger(s) && 

s.length >= minDigitsInIPhoneNumber )； 


function validatePhone(phoneNumber) { 

1 alirtrpr^" == ' ㈣ 。 咖 u mber = 

ease enter your phone number -)• 
return false; . 





<script> 

var request. 

function 
createRequest() 


</script> 


validation-utils.js 


© Add a reference to validation-utils.js 
the Break Neck web form. 


in 




TW»s Vmc wakes 

ufels.js ava'»laWc -to ^ 

d Jav/a ㈣ t 


<html> 

<head> _ 

<title>The New and Improved Break Neck Pizza</title> 

〈link rel="stylesheet" type 二 "text/css" 

href="breakneck.css 〃 media="screen" /> 

〈script type="text/javascript 〃 sre 二 "ajax.js"> 〈 /script 〉 

〈script type="text/javascript" sre 二 "pizza•js’’> </script> 

〈script type =,A text/javascript 

src =A, validation-utils . js"> 〈 /script 〉 

</head> 


pizza.html 
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these pages will self destruct... 


® Validate the phone number before 

sending it to the Break Neck web server. 




yowr piizj j s ^i| c . 


val'idatcPiioncfpiionc) 
eMttVs -to make suv-c tV>c 
value of ■(■•eld is 

d fiioy\C 朽 umbev. 


If tKc pKohC hUrmbev 
valid, you sKould^i 
schd a v-c^ucs-t -fco *tKc 
Bv-cak /Vc^k scv-vcv-... jus-t 
\rrtu\Th -to ihc y/cb -fovm. 


function getCustomerlnfo() 

var phone = document. getElementByld (''phone^) . value; 

if (validatePhone(phone) == false) { 

"^^turn ; 

var url = ''lookupCustomer.php?phone= /, + phone; 
request .open (''GET", url, true); ' 

request.onreadystatechange = updatePage; 
request.send(null); 



function updatePage() 


( 5 ) Test out your validation changes. 


Load 吖 

•m y° uv ^ 。 … 妙 . 

ttcvc ； s -that S3mnc VJCi\rd 
sci of dhav-adtev-s -that 
you irvto tKc 

Bv-cak l^cdk Ohlmc -fovrw 

a -few pages badk " 


r> o 


"Hi? Npw and lmpewi»d N«:k Pi] 




么 1 


area 


\ _ 

s Jlf'S IPIfiJiCih AH 

iE#>r a valid phonfi numb#ir. 


r i 


1ST 


Ypur piT-^a, just In time 


Enter your phone number \ U | m ^ 

Type your order in here: 


Your cwckr will be delrvcrerf tD： 


Prdrr Pm# | 


* Mff Asiiw - rtwn ww? 1 


CUM 





1 |-f 七 Vive’s a pv-oblcm, 
valida 七 ePWeO >will 
pv'mt By\ cv-v-ov oui, 
la^d \rciu\ry\ ^als« w . 


<script> 

var request. 

function 
createRequest() i 


</script> 


pizza.js 


Rcmcmbcir, all -the 
Blrcak /^efik-spefii-fid 

JavaS^v-ip-t is ih 

P ,Z2L ^ j s 


TW»S time, 70 UV 

valuAst* 0 ^ detects 
a”d ?y*oWcw, ad 
灼 cvcv* sc^ds 七 he 

lake” 汁 o”c ^umbev- 

•to B^cak Kcdk 
v/cb sevvev. 


PROJECT ： CHAOS isy/t y 七 a^bodys 

tus-tomcv- list W\i\\ 七 V>is impyoved vcvsioyv 
o( i\\t Bvcak Nctk OY&CC "fov • 你 . 
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are we done yet? 



So were done, right? Now that were 
validating the phone number, nobody will 
be able to enter those weird strings, and 
get our customer lists. 


You still need to secure the PHP script 

Even though you added validation to the Break Neck 
order form, you should still escape strings and tighten 
up the PHP script running on Break Neck’s web 
server. 

Even though you’ve added a nice layer of security to 
your web page, clever hackers can work around your 
page, and attack the lookupCustomer. php script 
directly. In other words, your validation helps protect 
your app from someone attaching you from a web 
front end, but doesn’t do anything to stop someone 
from going after your script directly. 

Besides, putting a little extra work into securing your 
PHP script is a good idea. You can never have too 
much security... you never know when some clever 
twelve year old will come up with a new way to get at 
your data, and create problems for your customers. 


You can 
never Kave 
too much 
security. 
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these pages will self destruct... 


IVhat’s wrong with the PHP script? 

Let’s take a look at lookupCustomer. php, and see where we might 
be able to make some improvements. 


I 七 , s 冰 J youVc ^oi -familiav- ^ PHP- ^ 
a basit idea 30^5 oi,, so you 

•tell youv PHP ^ y,a^ out U- 


1 


<?php 


// Connect to database 

$conn = @mysql—connect (''mysql. headfirstlabs • com", 

''secret", ''really-secret"); 

if ( !$conn) 

die (''Error connecting to MySQL: '、. mysql_error ()); 


if ( !mysql—select—db (''headfirst", $conn)) 
die (''Error selecting Head First database 

$phone = preg 一 replace (、'/[\. \(\)\_]", 

$select = 'SELECT ★ r ; 

$ from = ' FROM hraj—breakneck'; 

$where = ' WHERE phone = \ , ' • $phone 


• mysql 一 error()) 

$_REQUEST['phone A ]) 


$queryResult = @mysql_query($select . $from . $where) 
if (!$queryResult) 

die('Error retrieving customer from the database.') 

while ($row = mysql—fetch—array($queryResult)) { 

echo $row['name,] . ''\n~ • 


$row['streetl^] 
$row [ 'city' ] • '、 

$row['state'] • 

$row['zipCode']; 


mysql 一 close($conn); 


?> 


An 1 


< 7 ^ 

return ■ ■ 


Remember tW.s ^ 

Z? I Vs PHP 

makes a vc'ucst *to. 


?> 


lookupCustomer.php 



|£vcir\ -tKougii y/C v-id 
some o-f 七 lie piiorvc 
l^umbcv -fovmattrnj ； like 
^ )> and 七 heve’s s 七 ill 

p\roblcm... 

hot doihj 
£0 p^roted-t 

3\rc ih £^L 
hjceticm ai^ks, like 
|"tW single c\uoics... 

*tV\c yoicv\bsWy 
da^yv-ous st'll 
mscv*"t-cd •… "to 
£®L <\ucv-y. 

tteve s dho'tKev 

fotch-tial problem. The 

咖 p£ loops -thvoujh 
pH 仏 e ^rcsulh ii ^ 
| ahd dis plays ea^op... 

...but i\\t sdnft should 
y>evev" V"ctu\nr\ mov-c 
i\\a^ oY\t tusWc'r- 
iVc 11 to -fi% 七 Wis. 
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attacking the php script directly 


SQL injection attacks without the tveb form 

Now that you know some of the problems with the lookpuCustomer.php 
script, let’s see how P 4t ( VI 备办系 （or any other 
hacker) could exploit those problems and get the Break Neck customer list. 



Vou\r validaiiorv 
dailies attadks 
*tli\roujli 七 he B\rcak 
Ncdk ovdcv* -foVm. 


Clcvcv- ^atkcv-s sc^d a 
POST revest d\rtti\^ to 
yowr PHP Vittou 七 

usi^ *bV»c Nctk 

ovdev- -fov-wv at all- 



Kon,, veal ?w 

'yovAV 


vaMaW. 


Hypertext Transfer Protocol 
OST/placeOrder.php HTTP /1 1 
Request Method- POST 

Request URI ： / p ,aceOrder.php 

Request Version: HTTP /1 1 

i! ost: w ww.headfirstlabs.com 
Keep-Alive: 300 
Connection: keep-alive 
Content-Type. - 

application/x-www-form-urlencoded 

phone=( 214 ) 290-8762 


These tv/o POST V(\ucsis are brtaitd 
ocattly same by Bv-cak Nctk 
y/eb scv-vcv* and PHP scrip 七 . 


Hypertext Transfer Protocol 
POST/piaceOrder.php HTTP/1. •) 
Request Method: POST 
Request URI ： /placeOrder.php 
Request Version; HTTP/l 1 

i! ost: www.headfirstlabs.com 
Keep-Alive: 300 
Connection: keep-alive 
Content-Type: 


phone: 


SO d 




TV^cvcs yxo vaWaW 

yQgJ ye'uest sat 

PHP st'H V>avc a 

⑽ U mjctfcoyx atta 戊 m 七 
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these pages will self destruct... 


TV>c PHP stvift ayvd >wcb sc\rvc\r 
dor^i see d d'»-f-fcv-cy>6c betweew 
POST v*c«\ucsis scjr\d -fv*om {\\t web 

This merest is OK ay\d dan be ad POST \rc<\ucsts tv>at 

handled hov-mally by ihc PttP sdvipi. do〆 七 to^t 七 Wo— the -fovm. 



Valid phone number 
from a customer 






lookupCustomer.php 



You weed bo add some -fovm 
o*f setuvity bo pvev 忧七 this 
y*C<^ucs*t -fv*ow» 63us'nr\J ddw'SJC- 


PROJECT ： CHA^£ 9 els 

tile dus-fcomcv list... looks like 

你。代 foirh is Johha Jc-t sch-t 

■to B\rcak /Vedk dust>mcvs. 


Doug Henderson 
7804 Jumping Hill Lane 
Dallas, Texas 75218 
Mary Jenkins 
7081 Teak wood #24 C 
Dallas, Texas 75182 
John Jacobs 

234 East Rutherford Drive 
Topeka, Kansas 66608 


£ihdc ,ooku pCus^ cv . fhp 

has ho i-t will siili 

wWh a 6o^l e i c dusio 

心 a 银 ihjc ^ ioh 

^ 9ocs a ^ uhd 
ihe B " cak ^ web 4^.. 


州 c 浐 
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Protecting against SQL injection 
- ~^ in your PHP scripts 

There’s no reason to stop with your JavaScript. Let’s help Frank make a few 
upgrades to his PHP to help protect the server from SQL injection attacks, too. 


This IS 七 he mos-t 

This -funttiorv 
will take tavc o-f 
cstapnr»j s^ctial 
Aavad^vs, like 
七 hose s'mjlc <\uo 七 es 
_m i\\t 七 s-tv'mj 
you orvtcvcd- 


IA/c vcall^ sKould^: 
be loo? •” 七 Wou 吵 
七 he vcsul-U- Thcvc 
should r^cvcv- be 

mOVC 

d.US-tomCV* d»S^l3Y C ^ 

at a 


<?php 

// Connect to database 

$conn = @mysql—connect (、、mysql • headfirstlabs . com", 

''secret", ''really-secret"); 

if ( !$conn) 

die (''Error connecting to MySQL: '、. mysql_error ()); 


if ( !mysql—select—db (''headfirst", $conn)) 
die (''Error selecting Head First database 


$phone : 

»$phone : 

$select 
$f rom 
$where 


preg—replace ('、/ [\ • \ (\) \-] /", '、"， 

mysql 一 real 一 escape 一 string ($phone); 

='SELECT *~； 

=' FROM hraj_breakneck , ; 

=' WHERE phone = \， ， . $phone . ' 


• mysql error ()) 


REQUEST['phone / ]) 


$queryResult = @mysql_query($select . $from . $where) 
if (!$queryResult) 

die ( 'Error retrieving customer from the database .') 


货 / 叫 1 fetch—mWSqm ryRp^nl 、 { 


.$row = mysql__fetch_array ($queryResult); 

echo $row [ 'name" ] • 、 '\n" • 

$row [ ' streetl ' ] . '' \ n ; 

$row [ 'city^ ] . '' • 

$row [ 'state' ] •'、'、• 

$row['zipCode']; 




mysql 一 close($conn); 


卜。 4 ⑽偽 

? — b - “I 卜 C 

^Tormc^ (^l ^ ).. 

4 W S ，邮 


?> 


upperOJ 

rttwr 

} 

?> 


^/\{}\ *bKcsc dV^3ir\^CS, 
looku^C^S-tomCV « s 

Y^coittitd -fv-om most 

attars. U\tt v/ork! 


lookupCustomer.php 
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these pages will self destruct... 


Your customer database is secure/ 


PROJECT ： CHAOS sends i\^t 
sdr^e POST VC«\ucst, y/'rtK 
mjcttiojrv S*brnr^ m i 七 … 


r>cw-« 


, ， bu 七 "this "tirhe, youv* 

•^pirovcd pffp s^ops the attack. 



lookupCustomer.php 



Now lookupCust)mcv-.pKp 0K>ly 
V"cfeu\rhS a sih^le dus*to»v»e\r, ;hd 
iWt vulhcirablc -to w OS 七 
… jed+ioh a-fe-taks. 


IrGOUGNTUi! asked 

GSTIONS 


LI: mysql_real_escape_string()? What in the world is 
that? Did I mention that I’m not a PHP programmer? 

Al mysql 一 real—escape—string (> is a PHP 

function that escapes any special characters in a string, and 
makes that string safe to use in your SQL statements. It only 
works for MySQL databases, but you can find functions similar to 
this for all the major databases. 

And it’s OK if you’re not really familiar with PHP or these 
functions. Remember, the point is that you're talking to the 
programmers working on the server-side components of your 
app. Just tell them to be sure that they secure their scripts. 


G: And all this is called SQL injection? 

A: SQL injection is just one type of security risk for web apps. 
When you have form fields that are used to build SQL queries, 
hackers often try and enter special strings—like the one you 
got from cM —to try and 

get information out of a database, or insert bad data into the 
database. 

The bad news is that there are lots of other types of attacks you 
have to worry about... but the good news is that with validation 
and a little security on the server, you can protect yourself 
against almost all of these attacks. So go forth, and secure! 
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SOL lYi^c\Ac>Yi is 

airily 七 he 七 ip d 七 

\c^r^... we’ll be 

ba^k wVi^Yi yo\x 1 伫 29b 

仑 xp 私七 H>. 











() yHL I? 叫张 sts & K^spons^s 

More Than Words Can Say 



Ever feel like nobody is listening to you? Sometimes plain 

old English just doesn’t cut it when you’re trying to communicate. You’ve 
been using text for all of your requests and responses so far, but it’s time 
to break out of our plain-text shells. In this chapter, we’ll dive into XML, 
and teach our servers to say a lot more than they ever could with plain text. 
As if that’s not enough, you’ll teach your requests XML, too, even though 
that’s not always a good idea (more on that inside). Get ready... once you’ve 
finished this chapter, your requests and responses will never be the same. 


welcome to the next level 
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servers don’t get to say much 



\ 

So vat is on your mind zees week, 
Meester Server? 


I just don’t feel like anyone 
wants to listen to me. 


Dr. Zigmund: Ahhh, yes. So many of my patients feel zees way. It is a common 
problem. But in many cases, it is zimply just in your mind. 

Server: But in my case, it’s true! I mean, everyone wants to talk to me... I’ve got 
plenty of people saying things to me all the time... 


Dr. Zigmund: Zee? Zat is very important, to have friends that are zere for you. 

Server: But that’s the thing. When I start to say something back, they barely listen. 
In fact, it’s been getting a lot worse just lately. 

Dr. Zigmund: Tell me more about... “lately.” 

Server: Well, I used to say a lot of things. Like <html><head> 〈 title>Hello!</ 
title 〉 </head 〉 </html>. But now, if I say anything more than “1012”，I get 
complaints. Nobody will let me get more than a word or two into a conversation. 

Dr. Zigmund: And you zay you have more to zay? 

Server: Yes! I have much more to zay... I mean, say. Sometimes, I have a lot of 
things to say. I listen all the time and I never ignore a request... but when it comes 
time for me to respond, if I’m not done in a second or two, I get called these 
horrible things... 


Dr. Zigmund: Like what? What do zey call you? 

Server: Slow... bloated... 20th-century... oh, it’s horrible! I just want people to let 
me say a little more than “6” or “Pot 1”， you know? 
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• 參 • to Le continued^ 
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Speal tpf 


Time for a quick refresher on what the server’s been saying to our Ajax 
apps. Below are the five example applications you’ve developed so far. 
Your job is to go back and figure out what the server responded within 
each app, and write that response on the lines provided. 


ieoo 

ia^d 

A Vlls 

^ ► o c ♦ 

"] 一 »«tp rmm 

m M«<frftl>fci.c»wittcp^» Court 


Boards 'R* Us Sales Report 

ioowfeOAr#* Sold 


»tf«f CMI I 


1M7 

|«4 22 : 


Cash for the Slopes: $329305.51 


Cm UP 4 MM 4 


Cliaptep I ： Baaptb ‘R’ t!5 




ts-ih >r-i-r 


ureajf Jresir pizza 






Cliaptep 2s Break Wed Pizza 




- powwrvd C0M99 MaMr 

Pot I Coff^m Pmt 1 






■ l^h 


■ 


aW# hiHaiT^ ■ V IP 
■M+i".—_ 

« 醱幽 Bl 


HfSpt&nsiyat Caffee Ma^er 


Mr T 样 9 i 


園趣 

Cljaptepit ： Tap 5 CD5 



Bpeali Med Retfislfed 
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Speaktpl 



So did the server have much to say? What about all these complaints 
about nobody listening? Do you think they’re valid? Check your answers 
below, and decide for yourself... is the server getting to say very much? 


This is 从 c a 代 

认 cvc 栋 c scv-vcv- yts 
•to se^d wudh batk … 


Bjl 


T 0 


Boards C R* Us Sales Report 




1145 


Cash for the Slopes: $329305.51 


CJiaptep ]： Baamb ts 


iireaii nem mzza 




Poug Henderson 


7804 Jumpiwg Hill lawe 

Pallas. Texas 75218 



Cljaptep 2s Break Med Pina 


IVow … -the sevvev- vedlly 
doesh 七 jefe -to say 

州 wlh ih these apps. 






pow«r 9 d i 
Cdhm PM 1 

nr 


^9 


mm] 


bM# laHaT^i 1 ta# IP 
pm rtarl mmr iWh Fka *^itwfe Aap 1 * 

fca -ha .n* 

關盤 SI 

if li : x ： ti 


^Cliaptep Ss^arCaffee Maker 


No server involved! 





CliapteMt: Tap 5 CQs 



Remember *tVis y/ds 
lioy/ lohj i*t would 
"take -fov- *tlic pizz^ 
h> oivvivc. 


. Break Med Retfislfed 
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Do you see what I mean? I can’t go 
on saying nothing more than 、、 7 ’〜 or 
、、 2 〃！ It's driving me insane! 


Dr. Zigmund: Veil.... I do zee that you got to zay quite a bit in zee Chapter 2 over 
there. A whole address... zurely that’s ex-ziting! 

Server: Well, yes, but that’s still just one thing. I mean, I couldn’t send back, say, the 
customer’s address, and a special coupon for repeat customers. I just get to say that 
one thing: their address. 

Dr. Zigmund: Veil, zey zay that brevity is the zoul of wit. 

Server: What? Oh... the soul of wit. Well, whoever “zey” are, they don’t have to sit 
around all day listening to long requests, now do “zey ”？ 

Dr. Zigmund: Now let’s just calm down. Have you tried to say more than one 
thing in your responses? 

Server: Sure! But nobody really understands what I mean. Like, once I tried to 
send a customer’s address, phone number, and order back, and I used a semicolon 
to separate each part of my response. But nobody seemed to like that... they said I 
was too “proprietary”，and that I needed to be “standardized.” 

Dr. Zigmund: Zat is true, you know. Next, you’ll tell me you were using commas 
or zat strange “pipe” symbol to split your data up. 

Server: (Well, there was this one time...) 

Dr. Zigmund: I think I have just the zing for you, my dear friend. Let me just get 
out my prescription pad. It’s time you got a good dose of zandardization. Zis will 
help everyone under-zand exactly what you’re saying. 

Server: What goes is zander... ummm... standardization going to do me? I just 
want to be understood... 
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a prescription for xml 


from the office of ： 

Klaus Zigmund, EDM, NCC ， LPC 


Name 6&RV&R 


Date 


rc\rc ； s -fehc pircsdv-ip-tio^ 
:ha-t Dv. wv-o-fec 

卜七 -fov Sevvd 


^KTBM^iBie M31WP - Ml 




祕 miM) 酬 . 3 FRoF^rrvro cu 舰撤 v^_ 


Refill NR 1 2C3?4 5 
Void After 3+Z00?— 


SIGNATURE 


RX 639 


XML ： just ivhat the doctor ordered 

He may be a bit hard to understand, but it seems like Dr. Zigmund has some 
pretty specific ideas about helping web servers say more in their responses. 
Keep this in mind, as we’ll be coming back to XML in just a moment. 

But, speaking of help, it looks like an old friend might need some help herself... 
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Remember Katie? 

Katie’s been busy since we left her back in Chapter 1. She’s got a 
couple of new product lines now — snowboarding boots and a new 
custom line of bindings —— and she’s updated her online report to 
keep up with all three product lines. 


0 O Boards 'R' Us 

I 企丨 I C I I + I 0 http://www.headfirstlabs.com/books/hrajax/chc" Google 




Business is booming. Weve got three 
product lines now, but there's a 
problem... we don’t know how to get 
updated totals from the server for all 
three lines at once. Think you can help 
us out again? 


Boards 'R' Us :: How Much Butt We're Kicking 



Snowboards Sold 

1672 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 

Boots Sold 

312 

What I Sell 'em For 

$175.47 

What it Costs Me 

$54.23 

Bindings Sold 

82 

What I Sell 'em For 

$146.92 

What it Costs Me 

$98.03 


Boards ^ 
is sellihj 
showboav-ds ； 
Show bools, 

a 灼 d bihdih^s. 


Cash for the Slopes: $318936.42 


Show Me the Money 





Katies rnakmj some senous 

tss\) \\tr ^ Imcs! 





How could XML help 
out in the Boards ‘R’ 
Us application? 
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problems at boards Y us 


The problem with Boards Us 

The Boards ‘R’ Us report still uses an asynchronous request to talk to the 
server, and since you solved their caching problems, the report works for 
everyone in the company (including Katie’s man running Windows). 

But the server needs to send back three sales numbers now: the total 
number of boards sold, as well as the number of boots and bindings sold. 


This is -the sdme 
as "the vcv-sioh o( -the 


eon 

Boards 'R' Us 


http://www.headfirstlabs.com/books/hrajax/chi ^ r Q^ Google 

Boards 'R' Us :: How Much Butt We're Kicking 


Snowboards Sold 

1672 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 

Boots Sold 

312 

What I Sell 'em For 

$175.47 

What it Costs Me 

$54.23 

Bindings Sold 

82 

What I Sell 'em For 

$146.92 

What it Costs Me 

$98.03 



Cash for the Slopes: $318936.42 

Show Me the Money' 


A 


代 P 饮七 tHa-t ohly deal-t 

with showboavds. 



Request 
Updated Sales 
Totals 


PHP script 


卜权 心一如 s 代一广 

1 « I \ ^ 





How ^atic ； s PHP sdv-ip-t 
send badk tlivcc di-Pfcv-cht 
r»urnbc\rs ai iKc same -time? 
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Great! Someone finally wants me to 
say more, and I don’t know how. I 
HATE being a server! 



Dr. Zigmund: Progress, my dear friend! Now people vant to hear you. 

Server: But how can I say three things at one time? This is my only chance... and 
I’m going to blow it. 

Dr. Zigmund: I don’t zink you have been using my pre-zcription, have you? 

Server: I could just string the three sales totals together, and a space between 
them... no, that’s a pretty crummy idea... 

Dr. Zigmund: Have you con-zidered zee XML? 

Server: Maybe comma-separated values? Those are big in spreadsheets... but no, 
the commas could get mistaken as part of the total itself... 

Dr. Zigmund: Now I wonder who is not listening to whom... young man, I’m 
trying to tell you... 

Server: If I just had a way to send data in a format that I know the Boards report 
would be able to understand... I know Katie hates anything that might break in a 
few months, or isn’t standardized... 

Dr. Zigmund: Zees is hopeless. Zere is no cure for zee clueless zerver, it zeems. 
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OK, look... Tm loving this cute little 
story, but Ive got it, OK? The stupid 
server needs to use XML, right? Thafs 
the answer to the Boards problem? 



But do you understand why? 

XML can definitely help Katie out with her online 
report. So far, you’ve used plain text to send 
responses back to the web browser... but that’s just 
because you’ve only had to return a single piece 
of data, like an address, or the number of minutes 
until a pizza will show up. 

When you need to get more than just a single piece 
of information from the server, though, things get 
a little trickier. You’ve seen that using proprietary 
data formats just isn’t the answer: 

Hcv-c a\rc some examples of -the 

砂 v 饮 back data usi,a 

171 0 ; 315; 85 J — 


TKcv-c avc 七 Wee >r>umbcvs m 七 Wis 




N 


V 


v*cs^o)r>sc ； bu*t scv'vcv* 

d^a bvov/sev have *to 

y/Ka*t *0^ semitolo 於 means … 


I 1710 I 315 I 85 

(: 

Boy, bc*t*tcv Kopc nobody cvev dKa^jcs 
iKc ov-dev- o( iKcsc sales 七 ha 七 

yfould be bad ， bdd ； bad! 


Chapter 6 



… ih this dasc ； i-fe ； s uhde 釙 

wha 七 P u ^posc -the Co^a sev-ves. 
Does *_七 scpaira-tc ⑶七 

humbe^rs? Is this all ok> C humb 饮 ? 


Evcr\ y/orsc ： happens i-f *thc 

order o-f 七 he data \rc*tu\nr\cd 
Evcrythmg breaks/ 
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Filling that XML prescription 

Trying to come up with a data format that works for the server, that the browser 
understands, and that won’t have to change if Katie adds another product line or changes 
the order of items on her report... that’s not so easy. 

Luckily for us, Dr. Zigmund (as well as that rather impatient girl on the last page) seems 
to have a solution: XML, the extensible markup language. Using XML, we can come up 
with a simple response format that is clear, and contains all three updated sales totals. 


TWis I'mc jus 七 id 伙七 ifies 七 Wis as 

)<ML. I 七 jives i\\t vevsio 灼 of )<亂 - 


… how -the 
X 亂 is eroded. 


<totaU> 
voot clewcrvt.. 

\i just selves as 



<?xml version= 〃 l•0 〃 encoding= 〃 utf-8〃？> 
<totals> 

<boards-sold>l710</boards-sold> 
<boots-sold>315</boots-sold> 

〈 bindings-sold>85</bindings-sold〉’ 

i-f ttc ovdev' 〈 /totals 〉 J) 

TV sev-vev- tar\ sc^di batk *tWis tv\hrt 
^\ttt o( )<ML as its 


3 

clcwvC^ts- 




TKcirc s ho <\ucsiioh as -to whidh 
仙 mber is ihc boav-d sales, 
wKidh is -the boot sales ； a^d 
wKidh is -the bihdihjs sales. 


o( 七 hese I'mcs 

it >would 
still kc tlcav' 
v/ha 七 cadK y»umbcv 
represented. 



Ul What’s so great about XML? 

A: The biggest thing going for XML 
is that it’s a recognized standard. Some 
folks at the World Wide Web Consortium 
(or the W3C for short) define what makes 
XML, well, XML. And since most people 
agree to abide by the W3C standard, 
browsers, servers, and programs like PHP 
scripts can all use XML without wondering 
what a bracket or a semicolon means. 


■ RGOUGNTUzl ASKED 

QUESTIONS 


v 1 I still don’t see why it’s so bad 
to just make up our own data format. 
Wouldn’t that be easier? 

A: It might seem that way, but 
proprietary data formats—formats that 
you make up for your own use—can 
really cause a lot of problems. If you 
don’t document them, people forget 
how they work. Even worse, some of 
the characters you might use, like a 
semicolon or comma, can have more than 
one meaning, and they make the format 
confusing to programmers. 


31 I get why we should use XML, 
but do we have to use the same 
element names you did? 

AI No, not at all. That’s the beauty 
of XML: it’s flexible. So you might use 
boardSales instead of board- 
sales, or totalBindings instead 
of bindingSales. It's really up to 
you. As long as both the JavaScript in 
your browser and the code on your server 
know what names to use, what those 
names actually are is really up to you. 
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returning xml from the server 


pgp— 


While you’ve been thinking about Katie’s JavaScript and HTML, her server-side guys 
have been listening in. They’ve gone ahead and updated the getUpdatedSales.php script 
to return the XML we’ve been talking about, complete with updated totals for board, boot, 
and binding sales. Not too bad, huh? Here’s what the script looks like now: 




<?php 

// Connect to database 

$conn = @mysql_connect (''mysql. headfirstlabs . com' 

''secret’’ ， ''really-secret ’’）； 

if ( !$conn) 

die (''Error connecting to MySQL : " . mysql error ()) 


lot 0 -f tv>«s »S tKc same 
as 如 Boards ^ Ws 

had just w ar^d 


if (!mysql_select_db (''headfirst’’ ， $conn)) 
die (''Error selecting Head First database : 


rr 


.mysql error()); 


$select = 'SELECT boardsSold, bootsSold, bindingsSold A ; 

$from = ' FROM boardsrus A ; 

$queryResult = @mysql—query($select . $from); 
if (!$queryResult) 

die ( 'Error retrieving total boards sold from database . r ); 


丁 he Boards 
以 s dd'tdbdsc hOW 
keeps up wi-fch -feKv-cc 
pv-odu^-ts ： boards ； 
boo-ts, ahd bihdihjs. 


while ($row = mysql fetch_array($queryResult)) { 

$boardsSold = $row [ 'boardsSold" ] ; 灼七 Wis vevsio^ 七 V\e 火 eVe mtcv-cs-tcd 

$bootsSold = $row['bootsSoldH ； ^ ^ I values, mstead just 

$bindingsSold = $row['bindingsSold A ]i - 

} ^ 一 丁 tells -tiic b\roy/sc\r sdvift is 

header (''Content-Type : text/xml") ; //VIL ； hoi ttT/VlL markup ov 


Sihdc iKc -filrsi faifi o( iKis lihC, 
<?； is a s-ta\ri tag \y\ PHP, you 
"to Cdlio "tKis lihC ou*t using 
separate -fvom iKc v-cst 
o( ilic XML ouipui. 


echo、、<?xml version=\’’l • 0\" encoding=\’’utf -8\"?>’ 

?> 

TKc PttP \rctu\nr\s )<ML y\o^, mstcad o( just a 

single numbev ov a o-f HTML. 

<totals> J 丄 

〈 boards-sold><? echo $boardsSold; ? ></boards-sold> 

〈 boots-sold><? echo $bootsSold; ?>< /boots-sold> 

〈 bindings - sold><? echo $bindingsSold; ? ></bindings-sold> 

</totals> 

X 亂 cl^i has -the sales —b 饮 

^ 如 p^odudi -the 
Boards W U s da-fcabase c^uc^y. 



<? mysql close($conn); ?> 
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Enough talk; it’s time to take action. Open up the chapter06/boards folder in the examples 
you downloaded from http://www.headfirstlabs.com. You’ll see the files for the Boards ‘R’ Us 
app, including an updated HTML report (boards.html), several JavaScript files (ajax.js and 
boards.js), and the XML version of getUpdatedSales.php. Your job is to update the code in 
the report to get the XML response from getUpdatedSales.php. 

Open up boards.js, and find the function that gets the server’s response. For now, go ahead 
and comment out all the DOM code that updates the form... we’ll fix that up in a few pages. 
For now, you want to check the request’s ready state, make sure the status code is 200 
(meaning everything is OK with the response), and then show the server’s response in 
a JavaScript alert box. Once you’re done, you should be able to reload boards.html, click 
“Show Me the Money”，and get something back that looks like this: 


C\ r\ Boards 'R' Us 

http://^vww.headfir5tIabs.com/books^hrajax/chE " Qr Google j 


jSoards 'R'JLJs :： How Much 邱坏 W 竺 ■!§ 口型明 


Snowboards Sold 

1672 

What I Sell 'em For 

$249,95 


參 


http:// www.headfirstlabs.com 

<totals-> 

<boards-sold> 1725 </boards-sold > 
<bools-sold>3 25</boots-sold> 

< bi n d i ngs-sol d >95 < /bind ing s -sold > 


OK 


Cash Tor me Slopes: $318936742 一 

5how Me the Money 


Loading "http; / / ^w.lieadnrstlabs.com / books / hrajax/chapterO6 •'boards / boards-html' ! , completed 5 of 5 items 


A 



The alc\ri box 
shows -the scirvcv" s 
whidh is 

灼 ow puire )(ML. 

This is what you 

"to see or\ youv* 
ovm sd\rcch. 


STOP! Don t turn tke page until you’ve done tkis exercise. 
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printing the server’s response 


^Just Po It 


Did you figure out how to display the server’s response? Here’s what we did: 

1. We opened up boards.js, since that has the Boards ‘R’ Us callback function. 

2. We found the callback, updatePage(), and commented out everything except for the 
two if statements that checked the ready state and the status code from the request. 

3. We got the server’s response, and then used the JavaScript alert() function to show it 
to the user. 

Leave ready s*ta*tus 

todt aloy\c—>wc still i\tt& 七 ha 七 . 

function updatePage() { 

if (request. readyState == 4)^( TV>is just vcs^sc 

if (request. status == 200) { -fvom tV>c scv-vcv-, sKov/s it 

var response = request. responseText; alcv-t dialog bo%, 

alert(response); ^ _ / 


Here’s our code for updatePage(): 


卜 


V 


var newTotal = request.responseText; 

參 • • 

replaceText(cashEl, cash); 
else { 

// Error handling code here 



/ ou should have lo-b of 
亡 ode ir> he 代 … dommerrt all 

仏 3 七 ou 七 how> 



MORE 

fRGOUGNTUzl ASKED 

QUESTIONS 


LI: That’s it? The server sends back 
XML, and we just grab it using the 
responseText property? 

AI At its simplest, yes. But, as you’re 
about to see, there's a lot more we can do 
with XML than treat it as plain old text. So 
stick around... 


LI: How do we get the values out of 
the XML? That seems like it’s going to 
be a pain in the butt. 

Al Yeah, you’re right. Trying to break 
apart the XML data—called parsing the 
XML—and getting the values out isn’t very 
easy. Fortunately, there’s a better way to 
work with XML than as plain text. 


lil I I remember something from 
way back in Chapter 2 about a 
responseXML property. Should we be 
using that instead of responseText? 


Boy, you were really paying 
attention, weren’t you? Yes, the 
request object has a property called 
responseXML, and yes, it's a 
great idea to use that instead of 
responseText. But before we get to 
that, it looks like we've got a visitor... 
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Rcmcmbcv- Mike -fv*om batk \y\ 

Chaftev 午？ iVs the ovmev of 

七 he lA/cbvillc brtt *fav 啪 . 


广 、 

Oh my god. I’m finally starting to make 
some progress, and now Paul Bunyan 
wants to talk about selling me a bush. 

V. 


Hey there. Look, I know it’s not my 
chapter, but I really think you might be 
interested in one of my DOM trees. 


Mike: Not a bush... a tree. And not just any tree; I’ve got a DOM tree you’d just 
love. 

Server: Are you paying attention? Do you see me on this couch, and the nut with 
a notepad and bad accent? I’m not really looking to go into landscaping. 

Mike: Well, I couldn’t help but overhear you mention that you’re sending XML 
back in your responses now. 

Server: Yes, that’s right... I really have communication issues, and Ziggy here 
thinks XML will help browsers allow me to say a lot more and still be understood. 

Mike: Sounds like good advice to me. But how’s a browser supposed to do 
anything with your XML? It’s not that easy to parse an XML document, you know. 

Server: What? Are you serious? You mean, all this work, and I’m still not going to 
be understood? Let me just find a toaster and a bathtub, and be done with it all! 

Mike: That’s what I’m here for, though! The browser — and JavaScript —— can 
understand your XML. Any code that needs to read your XML response can just 
work with it using the DOM... and then everyone’s happy. 

Server: Yes! Well, let’s get that DOM growing, then. I think I can see the light... 
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xml and dom trees 


Trees, trees，everywhere I look 

You’ve already seen how the Document Object Model makes working 
with HTML easy. But the DOM is a lot more versatile: you can use it 
to work with XML documents as well. Let’s check out how the XML 
returned from getUpdatedSales . php looks as a DOM tree: 


All i\\t clcmc^-ts and m 

七 )<ML ⑶七 … 
iy 

<?xml version="1.0 

encoding= 〃 utf-8 〃 ？> 

<totals> 

〈 boards-sold^l710 
<boots-sold^3l^<^boots-sold> 
〈bindings -sold^85<j)bindings - sold> 
</totals> 


… show up ih the VOM hctt 
ircfv-csch-taiioh o( iKc )(/\/IL. 





You my not have \nown, 


B-ach of iiic iiiv-cc w sold w 
has one Aild 

灼 ode: a y\ode v/rth 七 he 

y^umbev* o^c ^rodud 七 

七 hat’s sold. 



that just as the browser sees your HTML as a DOM tree, web browsers 
automatically convert any XML they have to deal with into DOM trees. 

...that you can work with more than one DOM tree in the same JavaScript 
function. For example, you can read an XML DOM tree and update an 
HTML DOM tree, all at the same time. 

...that HTML elements and XML elements are both just element nodes in 
the DOM. There’s no difference between an XML type and an HTML type, 
at least when it comes to the DOM. 

...that the responseXML property always returns a DOM document 
object, even if the XML in the DOM tree is only a single element, or 
just a single text node. 
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Using responseXML in your code 

You’ve already seen that the responseText property of your request 
object lets you read the XML that the server responds with. But we don’t 
want a bunch of text that looks like XML; we’re DOM experts now, right? 
Using the responseXML property, you can get the DOM tree for the 
server’s response, and then work with that XML using the DOM. 

And since the HTML for Katie’s Boards report is another DOM tree, we 


i-f you doy^i -fed like dh 

expcirt youVc kidkmg buU/ 

by -feKc -tir^c you -finish -feKis 


^Kap-fecir ； you'll be bettev- at 
■fehe DOAI you 3\rc how. 


just want to grab values from the XML DOM and stick them in the HTML 


DOM. Let’s see exactly what we need to do: 



TV>e Wcsev ? uts tW.s POM 

•m ?^°? € 

七 he v-c^cst objett- 


‘ v 

^ ^ use ^ ihc XML 


totals 


boards-sold 


bindinas-sold 


boots-sold 


H 1710 


M 85 


、、315 


Boards 'R, Us \ \ 

0 http://www.headfirstlabs.com/boo«/hrajax/chc * cdbgle 


're Kicking 


Mufili 


Boa 


sold 


boards 


id 


span 


1710 


Sell 'em 


What I 


• 95 


.22 


sold 


boots 


id: 


11 Sell 


For $ 


75.47 


bindinos-sold 

— I VA/Ka«- T CaII 


id: 


11 Sell 'em For 


$ 146.92 


What it Costs Me 

Cash for the Slopes: $318936.42 


Show Me the Money' 


tteve's i\\t )<ML POM ^v-om 
i\\t Boavds sevvev. 


: a 
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working with xml using the dom 


I’m with you so far, but how can we get 
to those three 、、 sold” elements in the 
XML? They doiVt have id attributes like 
the <span> elements in Katies HTML 



x/ou toM also loo\> 
tW»s V»st a w W' loo?, 
•|jf you vi3ir\"tc(A "to- 


You can find them with their “tag name” 

So far, you’ve been using getElementByld () 
to find a specific element in an HTML DOM 
tree. But there’s another useful method called 

getElementsByTagName (). You can use 

this to find all the elements in a DOM tree with a 
certain name, like this: 


Dom 

S 觀 ^u C si 



var xmlDoc = request.responseXML; 
var boardsSoldElements = 

xmlDoc . getElementsByTagName (''boards-sold") 


This will return an array of all the elements 
named “boards-sold” in the xmlDoc DOM tree. 
Then, you can get elements from the list using an 
index, like this: 

var firstBoardsSoldElement = 
boardsSoldElements[0]; 


|\(ov/ v/cVc v/ov-k'mj 

Pom! 

Remember JavaSdvi^*t 
avvays stav-t at O, not I. 


Time to take a skortcut ： 


var firstBoardsSoldElement = xmlDoc . getElementsByTagName (''boards-sold^) [ 0 ]; 

_ — ^ ▲ 


- V^ 

TV^is yts all ttc clcwwb 

w cd 'Vavds - sold … 




… ahd tKis VctuVhS just tKc 
-fvom -the list 
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Ironi Alactctin? Wkat ii you usect tke request object synchronously? Tkat woulct just Le Jax, rigkt? But tken, tlia— 
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ax M on tke cover means a lot more sales. Ok, anct Le sure to keep an eye out lor next montli’s ieaturect ^ 



FRGOUGNTUzl ASKED 

QUESTIONS 

LI : I still don’t see what 
responseXML has to do with 
any of this. 

Al The browser puts the plain text 
version of a server’s response in the 
request object’s responseText 
property—whether that’s a single value, 
name/value pairs, or the text version of an 
XML document. 

But if the server returns XML, and sets a 
Content-Type response header of 
"text/xml", the browser creates a DOM 
tree to represent that XML, and puts a 
reference to that DOM tree in the request 
object’s responseXML property. 

So if I want to use the DOM 
to work on the XML, I should use 
responseXML instead of responseText? 

Al Exactly. There’s nothing 
wrong with getting the XML through 
responseText, but then you have to 
deal with parsing the XML yourself... and 
who wants to do that? 


Q ： In the HTML DOM on page 351, 
you showed id attributes as part of 
those <span> elements. I thought 
that the DOM represented attributes 
separately from elements. 

fil Wow, you’re really paying attention 
to those DOM trees, aren’t you? Nice job... 
you’re exactly right. The id attributes 
on those <span> elements are actually 
represented in the HTML DOM tree as 
separate nodes. We broke the rules a bit, 
though, and showed the id attribute as 
part of the element name, just to make 
things a little easier to understand. It's not 
quite how the DOM does it, but we thought 
it made our point a lot clearer. 

U: And there’s no difference 
between an HTML DOM tree and 
an XML one? 

Al The DOM for the web page 
represents HTML, and the DOM for the 
XML represents the server's response. But 
you work with both DOM trees in the same 
way, they have the same methods, and 
you can change both trees easily. Pretty 
cool, huh? 
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working with the boards xml 


^^Just Po It_ 

It’s time to put everything you’ve learned so far into action. Below is the updatePage() 
callback function for the Boards app. To finish the code up, you’ll need to use what you’ve 
learned about asynchronous requests, the DOM, XML, and dynamic HTML. 

function updatePage() { 

if (request.readyState == 4) { 

if (request.status == 200) { 

// Get the updated totals from the XML response 

var xmlDoc = request._; 

var xmlBoards = 

_._( 、 'boards-sold") [0]; 

var totalBoards = xmlBoards .firstChild.nodeValue; 
var xmlBoots = 

_._(''boots-sold") [0]; 

var totalBoots = xmlBoots .firstChild. nodeValue; 
var xmlBindings = 



var totalBindings = xmlBindings.firstChild.nodeValue; 


// Update the page with new totals 
var boardsSoldEl = 


document. 


(''boards-sold ’’）； 

var bootsSoldEl = 

document. 


(''boots-sold"); 

var bindingsSoldEl = 

document. 


(''bindings-sold"); 

var cashEl = document. 


(''cash"); 

replaceText( 

f 

) ； 

replaceText( 

r 

) ； 

replaceText( 

r 

) ； 

// Figure out how much cash 

var boardsPriceEl = 

document. getElementByld ('' 

Katie has made on boards 


var boardsPrice = getText(boardsPriceEl); 
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var boardsCostEl = 

document. getElementByld (''_ ’’）； 

var boardsCost = getText(boardsCostEl); 
var cashPerBoard = boardsPrice - boardsCost; 
var cash = cashPerBoard * totalBoards; 


// Figure out how much cash Katie has made on boots 
var bootsPriceEl = 

_. getElementByld (''boots-price ’’）； 

var bootsPrice = getText (_); 

var bootsCostEl = _. getElementByld (''boots-cost^); 

var bootsCost = getText (_); 

var cashPerBoot — _ — _; 

cash = + (cashPerBoot * totalBoots); 


// Figure out how much cash Katie has made on bindings 



You vc or» youv ov/h Kcvc ； 
bu-fc "this shouldn't be a^y 
fv-oblcm -fov you ai tKis 
stage o( iKc 


// Update the cash for the slopes on the web form 
cash = Math.round(cash * 100) / 100; 

replaceText(cashEl, cash); 

} else 

alert (''Error ! Request status is 〃 + request. status); 
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an xml response in action 


Trying things out 

Ready to take Boards 4 R’ Us for a little test drive? Make sure you’ve finished 
the exercise on the last two pages, and made those changes to your copy of 
boards . js. If you’re not sure about your answers, you can compare them 
to ours in the back of this chapter, on page 366. Then save your changes, 
fire up your web browser, and load boards . html. 


0 O O Boards ’R’ Us 

工 31 互 | 王 | ^ ittp://www.headfirstlabs.com/books/hrajax/chi 

Boards 'R' Us ：: How Much Butt We're Kicking 


Snowboards Sold 

1672 

What I Sell 'em For 

$249.95 

What tt Costs Me 

$84.22 

Boots Sold 

312 

What I Sell 'em For 

$175.47 

What it Costs Me 

$54.23 

Bindings Sold 

82 

What I Sell 'em For 

$146.92 

What it Costs Me 

$98.03 



Cash for the Slopes: $318936.42 

’ Show Me the Money x — 




IWs how boavds.hU| ou l 
Ckk u £how /VJc -the /Wohey'. 



0nn 


Boards 'R' Us 


...av\d 70U should yt 
undated totals ^ov 
all tWcc • 

Without 3^7 灼 办七 7 
pay v-cloads- 
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I I [ C I I + I 0 http://www.headfirstlabs.com/books/hrajax/ch * Google 



Boards 1 R'JJs :: How Much Butt We're Kicking 


Snowboards Sold 

Cl893^ 

What I Sell 'em For 

$249.95 

What it Costs Me 

$84.22 

Boots Sold 


What I Sell 'em For 

$175.47 

What tt Costs Me 

$54.23 

Bindings Sold 

ChD 

What I Sell 'em For 

$146.92 

What it Costs Me 

$98.03 


Cash for the Slopes: $369186.76 

Show Me the Money 


Looks like ^at«c «s 
sales m all 

七 Wcc I'mcs. 





Time vaisc 70UV 

-fees -fov- VJOV-k '^5 OY\ tV^C 

Boav-ds v-c\>ovt! 


















































xml requests and responses 



I’m telling you, Doc. rm so much 
happier these days. Ive finally found 
a way to say so much more... XML has 
really done the trick. 


Dr. Zigmund: Ex-zellent. Zo you find that you are listened to now? 

Server: Oh, yes. And I’ll even admit... that guy with the tree farm has really 
helped out a lot. 

Dr. Zigmund: Tell me more about zat... 

Server: Well, at first, I was sending back XML ― which was great, I’m telling 
you, nobody was asking me about comma-separated values or anything like that 
anymore —— and browsers totally understood what I was saying. But it seemed that 
people were having trouble using what I was saying. 

Dr. Zigmund: Oh, really? Why do you zink zat was? 

Server: Well, it turns out they were using the plain text version of my XML 
response. So they were trying to break up the XML on their own. Sheesh, what a 
pain that must have been! And lots of people were screwing things up. Really bad. 

Dr. Zigmund: And how did you handle zis new confusion? 

Server: Well, I took my Prozac first —— thanks a lot, everyone says I’m so much 
calmer now — and told them to use the DOM tree representation of my XML. The 
browser even made it available through a simple property of the request. 

Dr. Zigmund: Ahh yes, zee DOM tree from zee tree farm. Of course! 

Server: Yup. I’m telling you, life is great these days. I’m finally getting a chance to 
really say what’s important. And nobody’s cutting me off, plus I hardly ever have to 
send back a bunch of HTML, either. I’m cured, Doc, I really think I’m cured! 


you 1 re on your way ► 
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whafs the goal 


You keep saying XML is better because \Ys not 
proprietary, and that \Ys a ''standard." But that 
Boards 'R* Us XML uses elements like <boardsSold> 
and <bootsSold>. How is that standard? I mean, who 
else is gonna use those elements? 


XML is 

ft mctft- 



XML is a standard... 

...but how you use it isn|t- 

XML is a specification that the World Wide Web 
Consortium (W3C) works and agrees on. That 
means that when you say XML, everyone knows 
what you mean. But XML is really a 
metalanguage: a language for defining other 
languages. So, in the Boards app, you used XML, 
but you defined your own elements that had names 
that worked well with the Boards ‘R’ Us app. 

If you wanted to update Break Neck 
Pizza’s server to return XML, you’d 
probably use different elements, perhaps 
with names like <deliveryTime> and 
<orderConfirmation>. The code on your 
server and the JavaScript code that you write must 
use the same element names, or nothing is going 


language: 
it ctelines 

otker XML 


to work. 


TW.S -is /MU It y/V>at a). t\t^i 

• 1S , ar , a 七七士七一 七 W ， 

| ( kc >, su ?? osed 

be used. /ML. is a metala 十 V. 

I 


languages. hXMLh 


358 


Chapter 6 








xml requests and responses 


I still think XML is better than some weird 
made-up format. I mean, there will always be 
tools to work with XML, like the DOM, right? 

^ j 


Sometimes XML is great... 

...and sometimes it’s not. 

XML is a popular data format, and you’ll find 
tools like the DOM in every language. You don’t 
have to worry about the order of elements in an 
XML document when you’re using the DOM, and 
you don’t need any special parsing code. So XML 
is a great idea for representing data. 

But XML has its dark side, too: it takes a lot of text 
to say just a little in XML. All those angle brackets 
can really add up! And, as you’ll see in the next 
chapter, there are plenty of other good options, 
likeJSON. 



This is ah X/V1L /ou Kave h> use elements a^d 

auo>rd\^ {o tKc X 亂 sia^d, but you 
you^r ov/h cUcht 如 d aUv-ibutc io ^esic 

y 财 _ x 亂 la^uaje.just^you^ a ?? . 

<?xml versiQn="l • Q" encoding= /, utf-8 /, ?> 

<totals> 

<boards-sold>1710</boards-sold> 
<boots-sold>315</boots-sold> 
<bindings-sold>85</bindings-sold> 

</totals> 


try to 

use XML lor 

everytning. 
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sending xml requests 


f \ 

Hey, I bet ifs just as easy to send an XML 
request as it is to receive an XML response. 





Well ， there’s a little more to it... 

It turns out that you’ve got to do a good bit of 
work to send XML... in fact, quite a bit more 
work than it took to receive XML from the 
server. Most of the time, the effort you’ll have 
to put into sending XML just isn’t worth it. 

First, you’ll need to send the XML in a POST 
request... 


VCS^Oir\SC ■('V'OW' 七 
Boav-ds scv-vcv u ? 
almost too ^adWs! 


Sure, that makes sense. Because XML can 
get pretty long, and there's that maximum 
URL length on GET requests, right? 


That’s right. 

It doesn’t take a lot of data before an XML 
document gets pretty long. You’ll definitely 
need to use a POST request. Additionally, 
you’ll need to let the server know that you’re 
sending it XML, not name/value pairs. 


Thafs easy, too. I bet we can use a different 
Content-Type request header, right? 




You’ve really got this stuff down! 

You can use the setRequestHeader () 

method on your request object to tell the 
server that you’re sending it XML, like this: 

request. setRequestHeader (''Content-Type' 


'text/xml") 


TW.S tells server tKat tKc 

• 秦 ， -essayWat 
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xml requests and responses 


And now I can just use the DOM 
to work with my XML, and send 
over the DOM tree. 




And there’s the problem! 

Look at the “Content-Type” request header on 
the last page... it’s “text/xml”. That tells the 
server that it can expect XML, but in a text 
format. That’s not the same as a DOM tree. 

In fact, there’s no easy way to send a DOM tree 
to a web server. You’d basically have to write 
code that parses the DOM tree in reverse; it 
would need to take each node in the DOM tree 



and write it out as text. That’s called serialization, 
and it’s not an easy task. 


Hmm... that is starting to sound like a lot 
of work. But I guess I could just create 
XML as text, and send that, right? 


Why would you do that? 

After all the work you’ve done to learn how to 
use the DOM, it seems sort of silly to go back 
to text, doesn’t it? In fact, it’s pretty easy to 
make a mistake writing XML manually; that’s 
part of why the DOM is so powerful. It helps 
keep you from making mistakes in your XML 
document’s structure. 

And besides, what exactly are you getting 
out of all the extra work involved in sending 
XML to a server instead of name/value pairs 
using plain old text? 
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not sending xml requests 


You are back? I zought you were 
cured! What zeems to be the problem? 



Server: I finally found a way to communicate... to be heard... to be understood... 

Dr. Zigmund: Yes, yes, zee XML... is it not working anymore? 

Server: No, it’s great... I LOVE zee XML... I mean, “the” XML. But now 
everyone is trying to talk to me in XML. 

Dr. Zigmund: And zere’s a problem with zat? 


Server: Well, yes! What was wrong with text? What happened to the days of 
simple name/value pairs? Now everyone is sending me these long XML documents, 
but they’re saying the same things as when they were using simple name/value pairs. 


Dr. Zigmund: And how does zat make you feel? 

Server: Make me feel? It makes me feel bloated, and beaten down! Now I’ve got to 
parse the XML just to get the same values out of it that I could get instantly before. 
And then I’ve got to make sure there aren’t any errors. Just the tiniest little mistake 
in the XML, and everything blows up. Then the browser yells at me, and... oh, I 
just don’t think I can take this! 


Dr. Zigmund: Zo you want to abandon zee XML? 

Server: No! No, I love being able to say so much when I respond to a request, and 
XML lets me do that. I just don’t understand why everyone thinks that they have to 
speak XML to me. It just doesn’t make sense... 


Dr. Zigmund: It zeems to me that it’s best to zend you zee plain text, and leave 
zee XML to you. Yes? 

Server: Exactly! It’s so simple... oh, I hate my life. Why, oh why? 
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xml requests and responses 


My, my... zose are a lot of questions. I would 
zay y just remember my two golden rules ： 
leave zee XML to zee server, 
and ifs probably all your muh-zers fault. 



FRGOUGNTUil ASKED 

QUESTIONS 



Appa\rch-tly Dv-. Uhd 
is Rush 

ahd pcirKaps a bi-fe 
■too mudK F\rcud... 


LI I If we want the server to return 
XML in its response, shouldn’t we use 
XML to make our request, too? 

Al Not at all. The format you use for 
making your request has nothing to do with 
the format the server uses in its response. 
You could use plain text for the request 
and response, text for the request and 
XML for the response, XML for both the 
request and response, or even XML for the 
request and text for the response. 

lil: And if we’re sending XML, we 
just need to set the request header, 
right? 

Al If you're making an XML request, 
you need to use a POST request, set the 
“Content-Type” of the request to “text/xml” 
using setRequestHeader (), and 
then send your XML in text form using the 
send () method of the request object. 
Other than those few special steps, you’ll 
send the request just like you would send 
a normal text request. 


LI: I still don’t see why I can’t just 
use the DOM and send my DOM tree to 
the server. 

AI You can use the DOM to build an 
XML request, but you can’t just send your 
DOM document directly to the server. 
You’d have to get the text version of the 
DOM, and then send that instead of the 
actual DOM objects themselves. 


Ul Why? Wouldn’t it be better to just 
send the DOM directly, if working with 
XML as text is so bad? 

Al Well, it does seem like sending the 
DOM directly would be simpler. But it's not 
easy to send objects across a network, 
especially using the Ajax request model. 

Besides that, there really aren’t any 
advantages to sending XML instead of 
just simple name/value pairs. So for the 
most part, XML would only complicate your 
requests, not make them simpler. 


Ul I read about this JavaScript 
toolkit that would convert my DOM tree 
to a text XML document. Can’t I just use 
that toolkit, and then send the XML it 
creates on to the server? 

fil Sure, there's nothing wrong with 
that approach. But remember, you’re really 
not gaining anything by using XML in your 
request. You already can send multiple 
values using name/value pairs, and that 
format is a standard that any server will 
recognize. So even if you could use XML, 
you probably don’t want to. 

So there’s never a time when I 
should send a request in XML? 


Just about the only time it makes 
sense to send an XML request is if the 
server you’re talking to only accepts XML. 
For instance, you might need to talk to 
a web server that only accepts SOAP 
requests, which is a particular XML format. 
Other than these special cases, though, 
name/value pairs are almost always the 
better choice for sending requests. 
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xml or plain text 


命 


命 


WVUCM O 办 



命 

— 。 


Welcome to this week’s edition of “Which Data Format?” You’ve got to decide 
which data format is best for the 5 examples below. Be careful: some are requests, 
while others are responses. Good luck! 

Text or XML 


◄- 



◄- 


Top 10 itunes 
downloads of 
2006 



Request 
today's house 
blend 


Update journal 
with wew 
entry 


Number of 
hobbits that fit 
in a Volkswagen 


Play "Whew If 
Falls" next 




-► 



-► 
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xml requests and responses 



60 Second Review 


■ XML, the extensible markup language, lets 
you structure your data using elements and 
attributes. 

■ Most server-side scripts and programs can 
create XML responses to send back to browser 
requests. 

■ XML allows a server’s response to include more 
than one piece of information, without requiring 
proprietary data formats or special formatting. 

■ The responseText property of a request object 
returns the text version of any XML document 
returned by a server. 

■ You can get the DOM representation of an XML 
document returned by a server-side component 
using the requestXML property of the request 
object. 


■ If a server doesn’t set the Content-Type 
response header to “text/xml”，many browsers 
won’t correctly set the responseXML property of 

the request object. 

■ When the browser receives an XML response 
from a server, it creates a DOM tree 
representing the document. 

■ You can send XML documents as well as 
receive them, although it takes a special toolkit 
or custom code to send a DOM representation 
of an XML document. 

■ Creating XML manually, using plain text, is 
error-prone and usually requires a lot of effort. 

■ For most requests, name/value pairs sent as 
plain text are the best solution, and require less 
processing by both your JavaScript and the web 
server to which you’re sending the request. 
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exercise so/tif/ons 



Exercise 
Solutions 




It’s time to put everything you’ve learned so far into action. Below is the updatePage() 
callback function for the Boards app. We’ve filled in all the blanks for you, so check your 
answers against ours, and make sure you feel like you understand all this code. 


function updatePage() { 

if (request.readyState 二 = 4) { 

if (request.status == 200) { 

// Get the updated totals from the XML response 
var xmlDoc = request. rcSpOHScXMl ; 
var xmlBoards = 

xmlPoc . gctElcmchtsgyTagNamc (''boards-soid") [o]; 

var totalBoards = xmlBoards.firstChild.nodeValue; 
var xmlBoots = 

xmlPoc . gctElemchtsgyTagNamc (''boots-soid") [◦]; 

var totalBoots = xmlBoots .firstChild.nodeValue; 
var xmlBindings = 

xmlPoc . gctElemehtsgyTagNamc (、' bihdihgs-sold ") [03 ; 

var totalBindings = xmlBindings.firstChild.nodeValue; 


// Update the page with new totals 
var boardsSoldEl = 

document. gctElemchtPyW (''boards - sold ”） 


var bootsSoldEl = 

document. getElcmcwtPyld 


(''boots-sold ”）； 


var bindingsSoldEl = 
document • gctElcmchtPyld 

var cashEl 二 


_(''bindings-sold"); 

document. gctEkmChtPyld (''cash"); 


replaceText( 


boardsSoldEl 


totalPoards 


replaceText( 

bootsSoldEl , 

totalPoots )； 

replaceText( 

biwdiwgsSoldEI , 

total^ihdihgs 



// Figure out how much cash Katie has made on boards 
var boardsPriceEl = 

document. getElementByld ('' boardS^priCG_ ’’）； 

var boardsPrice = getText(boardsPriceEl); 


V® u 亡 。认 Id have -these 

■Birce lihes o( todc m 
order, as as 
you keep -the element 
its value 
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var boardsCostEl = 

document. getElementByld ('' boardS^CQSt 〃)； 
var boardsCost = getText(boardsCostEl); 
var cashPerBoard = boardsPrice - boardsCost; 
var cash = cashPerBoard * totalBoards; 

// Figure out how much cash Katie has made on boots 
var bootsPriceEl = 

document . getElementByld (''boots-price"); 
var bootsPrice = getText ( bootsPriceEl )； 

var bootsCostEl 二 dOCUHICht . getElementByld (''boots-cost"); 

var bootsCost = getText ( bootsCostEl ) ; This v/as a little bi 七 tvitky - vc 

var cashPerBoot 二 bootsPrice - bootsCost ; to Vtty a vurmi% 

cash = cash + (cashPerBoot * totalBoots) ; du\rv-cr»*t value o-f and 

〜 1 -- - add "to 

// Figure out how much cash Katie has made on bindings 

var bihdiMgsPriceEl g _ 

documcht.gctElcmchtgyldrbihdihgs-pricc");_ 

var bihdiwgsPrice g getTcxt(bihdihgsPriccEI);_ 

var bihdiwqsCostEI g _ 

documcwt.getElcmcwtPyW^biwdiwgs-cost"); 

var biwdiwgsCost s getTcxt(bihdiwgsCostEI); 
var cashPcrPiwdiwg s biwdiwgsPrice - biwdiwgsCost; 
cash s cash + (cashPerPiwdiwg * totalPiwdiwgsJ; 


// Update the cash for the slopes on the web form 
cash 二 Math.round(cash * 100) / 10 0; 

replaceText (cashEl, cash)/ 

} else 

alert (''Error ! Request status is 〃 + request. status); 
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data format answers 


命 


命 


WVnCM OA ： 



命 


Welcome to this week’s edition of “Which Data Format?” You’ve got to decide 
which data format is best for the 5 examples below. Good luck! 


Text or XML 


-the sevver has 
s Chd bddk mov-e 
thah one piede o( 

X 亂 

wovks well here. 


Request 

today's house - ► 

blend 



Top 10 (Tunes 
downloads of 
2006 





Update journal 

with new - ► 

entry 



)<ML would >wov-k 
V\cvc, bu 七 s •… 



ttcv-c s only 3 ―― 

^\ttt <A da*ta> 

七 O 七 ’IS rr\UdV\ C3SICV- 



Number of 
hobbits that fit 
in a Volkswagen 


同 


function go ()) 




Play "When It 
Falls" next 




TKcvc s aUos-t 
V\CVCV 3 ir\ccd *to 
send vc^csts 
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J JSOM 梅把 YHL 

A Fight to the Finish 



It’s time to go back to elementary school. Remember 

the days when differences were resolved with harsh words, flying fists, 
and poor kung fu imitations? Remember when nothing thrilled your 
soul like hearing “Fight!” screamed in the halls of the cafeteria? In this 
chapter, we’re going back to those days, and leaving friendly words 
and the golden rule behind. XML and JSON, two different formats 
for sending and receiving data in your asynchronous requests, are 
ready to let their differences be settled in the squared circle. Get your 
scorecard ready, and let’s take it to the ring! 


welcome to the next level 
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a new data format 


Hey Frank, look at this... I found this great 
article about a new data format that works 
with asynchronous apps. It*s called JSON, and 
I really think we should check it out. 


a PttP juvu, 

dytd Kas be ⑶ 
us by y/vrtnr^ all 
o-f ouv PttP scr’ifb 
七 Wou^iou 七 most of 
七 he book. 


Jo〆 


-fo>- 


s h 。七 





sc ^-sid c 

，OVes 


Frank: Why do we need a new data format? Since we 
went to XML, I think things are running better than 
ever. 

Joe: Well, maybe for you. But XML isn’t exactly easy 
to work with for us JavaScript guys. 

Frank: Why not? I thought that you were using the 
Document Object Model to handle the XML my 
scripts have been sending back to your requests. 

Joe: Well, yeah, I have been... 

Frank: Yeah, I saw that Top 5 CDs app you wrote. It 
was sweet! And you only used the DOM? You must be 
pretty good with that thing... 

Joe: Oh, I love the DOM for working with web pages. 
But it’s just a little clunky when it comes to XML. I 
mean, I spend all my time moving up and down the 
XML document just to get a few values out. 

Frank: So you think this new data format will help? 
Tell me a bit more about it. 

Joe: Well ， it’s called JSON: JavaScript Object Notation, 
and it’s —— 


Frank: Wait a second. The data format is JavaScript? 
That doesn’t sound so good. I write PHP, Joe, not 
JavaScript! What are you thinking? 

Joe: But it’s supposed to be really easy to use, and fast... 

Frank: Look, I’m a server-side guy. I’m not gonna 
start using JavaScript in my PHP. That’s just nuts! 
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xml versus json 


A review of request and response formats 

Before we dive into the JSON versus XML debate, let’s review the data 
formats we’ve already used in the first six chapters. 
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PHP script 
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Plain Text 
Request 
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XML Response 



XML i-fc easy 
*Pov -the 

scv-vcv* {jo 
send move domplex 
responses ix> youv 
^"C^cs^ts … youv* 
■c^ucsis avc s-ti|| 
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badk m i-ts vcs^>oy\scs. 


PHP script 
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xml versus json 


Should you use XML or JSON? 

Joe and the JavaScript guys want to look at JSON, but Frank’s PHP team 
thinks XML is the way to go. Which is the best data format? In this chapter, 
we’re going to let JSON and XML take each other on, and see which one 
survives the ULTIMATE DATA FORMAT CHAMPIONSHIP. 




ULTIMATE DATA FORMAT CHAMPIONSHIP" 




VS 
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HTML 4.01 VS. XHTML 1.1 
U1MERTHTML VS. THE DOM 
HAROLD DAVIS VS. CAROLE BRAHDT-FIHK 

HEMD TtEL-ST BOX QPHCE 


800-9QS-9VH 


娜 

ADAM DURITZ VS- ROB THOMAS 


Hcwecfascer 


吻 " is a relative 
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心 3 〜 XML a v-u h 4 ^ 

^' s "title as V-eijhing 

ds ^ dhampioh. 
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xml versus json 


Words 



Today’s adrenaline-laced, psyched-up fighters ： 

XML and JSON 


XML: (glares at JSON) 

JSON: Your time has finally come, XML. Tonight, 
the world is gonna see that you’ve lost a step, 
especially when it comes to JavaScript and 
asynchronous applications. 

XML: I’ve heard that one before... but here I am, still 
the reigning data format in the world. 

JSON: You're only at the top because people think 
that there’s nothing else available. I know lots of 
people that can’t stand you, XML... you're big and 
bloated, and a real pain to work with. 

XML: I’m big because I can handle anything. 
Snowboard sales, HTML, purchase orders... you 
throw it at me, I'll take care of it. No problem. You 
think a little pipsqueak can handle all those different 
types of data? I don’t think so. 

JSON: Maybe not, but I'm fast... a lot faster than 
you, most of the time. 

XML: I’m plenty fast, especially if you use my 
attributes. And, I’m versatile... I can do all sorts of 
things, like represent a math equation or a book. 

JSON: Yeah, well, most of my users aren’t too 
interested in sending math equations across the 
network. Besides, all those angle brackets? Ugh... 
anyone that knows arrays can start working with me 
without having to learn all that weird XML syntax. 

XML: But can someone transform you into 
something else? Like with XSLT? Or what about 
web services... you gonna tell me you can handle 
web services? 

JSON: Wow, you've really been a bit overused, 
haven’t you... you’re missing the point, bracket- 


head. I don’t care about all those things. I just 
care about getting information from a web page to 
a server and then back without a bunch of extra 
work... like having to crawl up and down a DOM 
tree. Know anyone who thinks that’s fun? 

XML: Uh, yeah. Hello? We've got a whole group 
of DOM experts out there these days, writing killer 
user interfaces. Did you see that Top 5 CDs listing? 
That was pretty cool, and it was only about 100 lines 
of code. Anyone that knows the DOM is ready to 
use XML, today! 

JSON: Look, all developers really need is a 
lightweight data format that’s easy to work with in 
JavaScript. And that’s me, big boy, not you. 

XML: What are all the servers going to think about 
this? You know, PHP and Perl and Java... I don’t 
see them lining up to throw their support in with you 
and your lightweight data format” spiel. 

JSON: Well, I guess that’s true... but there are 
libraries that those guys can use to work with me. 

XML: Libraries? If they've got to use a library, why 
not use a standard like the Document Object 
Model? 

JSON: My libraries might be standard one day, too, 
you know.... 

XML: But here I am, being used right now, because 
I’m already a standard. At the end of the day, you’re 
just one more proprietary data format. Maybe 
you've got a few more fans than comma-separated 
values, but I'll put an end to that. 

JSON: Oh really? Let’s get it on, XML. 
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xml from the server 


The heavyweight champion ： XML 

You’ve already seen how a server can return 
XML in response to your request: 



PHP script 



綠 bcch 如一仏 e bUk … 
ahd y° U alfrc3d y khow how -to use 

^ ^ with X/VJL dais.. 



Boav-ds ^ Us sewev 
batk m & 


You work 

witli XML 


using tke 


DOM. 
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xml versus json 


You use the POM to work ivith XML 



Internet Explorer 


Firefox 


Web Browser 


Opera 


Safari 


Mozilla 



getNew Totals() 


JavaScript 



youv- you 

"the VOAI "fco y/o\rk y/i-tli 
se\rvc^s X/VIL vcspohsc. 


use 

a 



315 


... 3 鄭。 _ P0M 
6 od C ^ 


totals 


XML — 

:: 


bindings-sold 


boots-sold 


tWs 仏 e VOM i\rcc -fov 
七 X 則 L dodumCh't... 


boards-sold 


H 1710 
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json from the server 


The young upstart ： JSON 

JSON is more about curly braces than the brackets 
you use in XML, but it can store all the same data 
that XML documents can: 



w -to-tals 1 is a-t ttc 
-bo^-lcvcl ； 
do^ia'ms i\\t tWcc 
ottcv- \>'»c6cs Jc daia 


PHP script 


he cnujva|chi 
°^ ihe XML you l ooked ai 
o" "the opposite page. 



几 ⑽把 i^ ec ihdjvjdud| 

bits o( daia, with a 
nurhcHd vslug. 


w boavds£old' w boo*USo 
avc y^ames ^ data 


av»d ^ 

avc i)nt daia values. 




J£ 0 N »s vela 七 Web/ 

V\C>M *to 

sttv\t) but Kas 3 lot 
o( b'15 -fay>s alvcady. 
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You work 
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xml versus json 


You don’t need a special object 
model to work with JSON data 


Internet Explorer 


Firefox 


f 


Web Browser 

Opera 


Mozilla 


Safari 


getNew Totals() 


JavaScript 


hire's some ‘ 此〜批 that 
WO<rks w 如仏 is j£0/^ dais. 


IVdl look at 
how "to gei iKc 

-(*\ror 

*Uie sewev-s 一 
V"Cspor»sc ih just 
a -few pages. 


jsoir\p3*t3 |S I 
如 JSON 
data oWy 


function updatePage () { 

if (request.readyState == 4) { 

if (request.status == 200) { 

// Get the updated totals from the JSON response 

var jsonData = eval('(' + request. responseText + 

var totalBoards = 


厂） 


jsonData.totals [0] .boardsSold; 

var totalBoots = 

jsonData.totals[0].bootsSold; 

var totalBindings = 

jsonData.totals [0] .bindingsSold 

// update the page with new totals 


^rciu^s -the 

打 t (dy\d or\ly) 

U -to^ls w iic^. 


:: iti 二二 ' d ， 
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json is javascript 


So JSON is just JavaScript, right? I don't 
need to worry about the DOM y or some 
toolkit... I can just use JSON in my code 
sort of like rd use an array. 




JSON is just JavaScript 

JSON is just a way to represent objects 
in JavaScript. In other words, JSON 
is JavaScript. You don’t need to work 
with the Document Object Model, or 
any other toolkit, to use JSON in your 
JavaScript code. 

In fact, you can work with data that’s a 
lot trickier than the simple set of values 
you’ve seen so far... let’s see how Katie 
and Boards Us can break their sales 
data down a little further... - 一 


JSON is 

JavaScript^ 


378 


Chapter 7 








xml versus json 


a little move J£ 0 N- 
This 七 ime ， 七 he Boavds 'R’ IXs 
sales av-c bv-oken up by di-ty. 


TKc ^ ^ow is ioialsCOJ, -the 
scdohd is so oh... 
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r^ocation^^enver^, ^oardsSold ^： 379, ''bootsSold^: 94, ^xndxngsSold .18) 
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\\ 
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TKis JaN/aSdvip 七 … 


-this J^OH da*ta … … *to y 七 Boavds 'R' Us 

sales -totals. 


— ^ 气 U f°：, 
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The same is done y/itV^ 
boots a^d ttc bmdmy”. tac\\ 
lodatio^ is aettsstd by mdc%, 
like avvay, a>r»d 从⑼ 
values m that lodatio^ avc used. 


// Get the updated totals from the JSON response 
var jsonData = eval^yf^ + request.responseText + 

var totalBoards 


var totalBoots 


厂） 


I sonData.totals[0].boardsSold + 
jsonData.totals[1].boardsSold + 
jsonData.totals[2].boardsSold + 
jsonData.totals[3].boardsSold; 
jsonData.totals[0].bootsSold + 
jsonData.totals[1].bootsSold + 
jsonData.totals[2].bootsSold + 
jsonData.totals[3].bootsSold; 
totalBindings = jsonData.totals[0].bindingsSold + 

jsonData.totals[1].bindingsSold + 
jsonData.totals[2].bindingsSold + 
jsonData.totals[3].bindingsSold; 

// Update the page with new totals 


y o u do^i CVC^ v^avc -to tovwev 七 

-tiicsc values -fvom s*brmA” 
JavaSc.vi^*b ky\o>ws *b^a*b 3v*c 
^umbevs a^d tv-cats 七七 ha 七 
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the json data format 



fRGOUGNTUzl ASKED 

UGSTIONS 


So JSON is just another data format, like XML? 

Al That’s right. Any time you send information between your 
web page and a server, you're going to need some way to format 
that information. So far, you’ve used plain text to send requests, 
and text and XML to send responses. JSON is just one more way to 
send data back and forth. 


LI I If we’ve already got XML and text as options, why do we 
need JSON? 


So I should convert my version of the Boards ‘R’ Us 
application to use JSON? 

Al That’s really up to you. We've created a version of the 
Boards app which gets JSON from the server. You can check it 
out online at http://www.headfirstlabs.com/books/hrajax/chapter07/ 
boards/boards.html. You can also check out the code we used in 
the chapter07/boards/ folder in the examples. 

But there’s nothing that says you need to use JSON in your version 
of the Boards app, or in your own apps. It's just an option, along 
with XML and text. The choice is really yours. 


Al A lot of JavaScript programmers aren’t used to looking at 
or writing XML Even though the DOM hides a lot of the details of 
XML, JSON still feels a lot more like arrays and lists to JavaScript 
programmers than XML does. If you know both XML and JSON, 
then you’re way ahead of the curve, and can choose whichever 
format you like. 

LI: I’m a little confused by all those curly braces. Can you 
explain how they work again? 


LI I But which is better? XML or JSON? 

Al It really depends on your app. Lots of times, JSON looks and 
feels a little more like working with rows in a table, or arrays... but 
XML can represent complex data structures pretty easily, too. The 
choice is up to you! 


Al The curly braces, {and}, contain unordered sets of values, 
and the [ and ] characters indicate an ordered array. Take a look :， 


Tiic -tof-lcvcl iicm is 
w *bo*tals w . 



tntalsf21 

totals[3] 


"Hie a\rray 
shirts a-fc O, KiO'fe /. 
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dddcss \row ih 
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-thch -fehc o( 
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{''location' 
{''location 
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(^location 
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: ''Santa Fe", ''boardsSold^ : 236, ^bootsSold^ ''bindings Sold^32}, 

..moulder% ''boardsSold- 453, ''bootsSold-. 90, ''bindingsSold^OI^ 
.••''Denver", ''boardsSolcL-<37^ ''bootsSold" •• 94, ''bindmgsSold j 


totals[3].boards5old 


totals[2].bindingsSold 

























xml versus json 


^pJust Po It 


Before we discuss how JSON and server-side languages like PHP get along, let’s 
take a closer look at how you can access JSON data in your JavaScript. Here’s 
another JSON data structure: 


{''books":[ 

{''title":''Hyperion", ''author" : "Dan Simmons", 、 'isbn" :''0553283685'、}' 

.. _ . . ''author" • "Alfred Bester" , 、 'isbn: ''0679767800'、}, 

{''title":''The Stars My Destination , aurnor • aj-j-j-cu. , 

{-title--.''Black House", ''author": [ ''Stephen King", ''Peter Straub"], 

"isbn": ''0345441036''}, 

{''title":''The Golden Compass^ ''author" •• "Philip Pullman", 、 'isbn" ••''0679879242''}, 

]}； 


Below are several values from the JSON structure. Your job is to write the 
JavaScript code that would return the value from the JSON data structure. 
You can assume the JSON data is in an object called jsonData. 


dor>c -the -fiv-st 
you started. 


OK>C 




var bester 5 jsonl?ata.booksU3.author; 
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json on the server 


I’m thrilled that JSON data is so easy to 
use in your JavaScript code... but \Ys a big 
pain in the butt for me and my PHP scripts 
to deal with. You realize that, right? 



We did say that JSON is JavaScript 

The great thing about JSON is that it’s just 
JavaScript, so the JavaScript code in your 
web pages can use JSON data really easily. If 
you’re already used to working with arrays in 
JavaScript, then you’ll be able to use the arrays 
returned from a server’s JSON-based response. 

If you’re used to working with JavaScript objects, 
then JSON will feel really natural, too. 

The bad news is that since JSON is JavaScript, 
languages like PHP and Perl and Java can’t 
understand JSON without a little help. You’re 
probably going to need a library to help you 
create and output JSON in your server-side 
scripts and programs. Then you’re going to have 
to figure out how to use those libraries, which 
takes a little time and effort. 
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xml versus json 


/oull i^ccd a Ktew 
Sc\rv*utcs_j£^/V 

objcd-fe -to handle 

Chdodihj a JSON 

ircspoir>sc ih pffp. 


pttp's avvay 七 
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■Uv” *to JSON 
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JSON uses lots o( 
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WcvVs Fvar»k ; s modified PHP 

sdvipi... r»ov/ i-fc \rcspohds -fco 
yowr vc«\ucsis wi-tK J£ 0 N data 
ir»sicad o-f XML da-ta. 

$boardsSold = $row['boardsSold']; 

$bootsSold = $row['bootsSold^ J ； 

$bindingsSold = $row[ 'bindingsSold , ]； 

: iSjustohC ^^al 
W i'^aHcs ihai leis Pffp 

請 “ i 仏 JW da-b. 


require__once (' JSON.php,); 


$json = new Services__JSON ()； 
$vail =^ a rray('location^ 

'boardsSold ， 
'bootsSold ， 
'bindingsSold, 

$santaFe = array('location^ 

'boardsSold ， 
'bootsSold- 


=> 'Vail,, 

= > $vailBoards, 

= > $vailBoots, 

=> $vailBindings); 
=> 'Santa Fe,, 


: 〉 $santaFeBoards, 

〉 $santaFeBoots r 

boardsSold’ => $boulderBoards, 

'bootsSold, => $boulderBoots 

'boardsSold^ => $denverBoards 

'bootsSold, => $denverBoots, ^ ^r 

totals = ' 心 din gsSold ， => $ denverBindings )； 

array('totals'=> 

array($vail, $santaFe, $boulder, $denver))• 

$output = $json->encode($totals )； ’ 

print($output )； 

c ^°dc() 

y 斯 PWP a， s ‘ 

a 吻 " s^u^-tuve. 


mysql—close($conn) 
?> 


Vis -takes a lot 
七 … .i 七 

iccmcd 3 bi 七 
rasiev* \p output 
\Y\ )</VlL vcspo^sc. 


Oi\tt you^c 
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CKaptcv- ^>, by\A ^ompav-c the PHP that v-espo^ds with 
)(ML *bo this PHP, v-espo^ds y/i*th JSOK- 
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converting text to a json object 


If I can convince Frank to have his scripts 
send my JavaScript JSON y how do I deal 
with his response? Do I use responseText 
again? Or responseXML? 




JSON comes across as text 

When servers respond with JSON, they 
send the data across as text. So you need to 
use the responseText property of your 
request object to get the JSON data. But 
JSON is meant to be used in JavaScript as 
an object, so you’ve got to convert it from 
text to its object form. You can do this using 
JavaScript’s eval () function, like this: 




0 


Yeah, right. 

Like I want a bunch 
of JavaScript in my 
PHP scripts... 






function updatePage() { 

if (request.readyState 
if (request.status 


cvalO -takes a 士叫 

匕崎士 the S^j h g 

^OH dais ^reiufrhcd 
必呻七 object 




jso^Pata Will ^<>1( 
七 he JSON 
m its object for* 
a-ftev- 七 Wis v-uir\s. 


request • sLdLuo ^ 一 ” L m , 

yar jsonData = eval('(^ + request. responseTex 

Get the updated totals from the XML \^ons= 

rni .boara^&©id- 


厂） 


var totalBoards 


L u w ^ - 、 

^sonData> totals[0].boar( 
jTonData. totals[1].boardsSold + 

jsonData.totals[2] .boardsSold + 

jsonData. totals[3].boardsSold; 

jsonData.totals[0] .bootsSold + 
jsonData.totals [1].bootsSold + 
jsonData.totals [2].bootsSold + 

jsonData. totals[3].bootsSold; 
var totalBindings^ jsonData 


i^ucs*tvcs^o^scTc'/>*b 

>lds JSON 

七 wt -fovm, ttc 

iv-vcv- v-ctuv^cd- 


var totalBoots 
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Looks l«kc JSOK V^as so^c ^ous 
skills... tW»s »s a data Wat 
\s^i voll ovcv U )<ML- 



l : RGOUGNTUil ASKED 


QUESTIONS 



G: Couldn’t I just output JSON in my PHP script as text, 
and avoid using a library? 

AI If you really wanted to, yes. You’d have to know JSON 
pretty well to just type it in, and be sure you don't make any 
errors. But if you’re really familiar with JSON, that might be 
an option for you, and you can avoid having to use the JSON 
libraries in your PHP scripts 

One of the big advantages of using a library for JSON output, 
though, is that your scripters and server-side programmers don’t 
have to learn JSON; they can use normal PHP or Java data 
structures, and then let the toolkit convert those structures to the 
JSON data format. 


Sol need a library to use JSON in my web apps? 

Al Your JavaScript code can use JSON without any special 
libraries or toolkits. But your server-side programs, which are 
probably written in PHP or Java or maybe Ruby, probably don’t 
know how to work with the JSON data format without a little help. 
So you'll need to get a library that allows those programming 
languages to understand and work with JSON data. 

UI So where can I get libraries for my server-side 
languages? 

Al You can visit the JSON web site at http://www.json.org to 
get information on most of the popular JSON libraries. There’s a 
library for all the major programming languages, so you shouldn’t 
have any trouble finding one that’s right for you. 


And if my server returns JSON, I use the responseText 
property to get that data? 

Al Exactly. The server returns the JSON data as text, which 
is easy to send over a network connection. The web browser 
stores text responses from servers in the request object’s 
responseText property, so that’s where you should look for 
a JSON response from your server. 


0： 


Why do I need to use evalQ? 


Ill Remember, JSON is JavaScript Object Notation. JSON is 
a data format, but it represents data as an object, not just plain 
text. When you get the server’s response, though, it is plain text, 
stored in the responseText property of your JavaScript 
request object. 

To convert that text into an object, you need to use JavaScript's 
eval () function, eval () takes a string as an argument, and 
tries to either run that string as a command, or convert it into an 
object. In this case, eval () sees that you’re giving it the text 
version of some JSON data, and returns a JSON object that you 
can then use in the rest of your JavaScript. 

: And there’s no DOM tree involved, right? 

Al Right. You don’t need the Document Object Model to work 
with JSON data. 
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text requests versus json requests 


Since JSON is just JavaScript, I can 
use JSON as the data format for my 
asynchronous requests, too, right? 



You can use JSON, XML, or text 
in your requests to the server 

You can send JSON to the server in your requests, 
just like you can send XML or text. But just like 
with XML, it’s often easier to use plain text name/ 
value pairs to send your requests to the server. 




You skould 

use text ctata 
tor your 
requests 
wkenever 


ossible. 



What if I want to send objects or 
arrays in my request? 


JSON is great with objects... 

...but do you really need objects? 

JSON is a great way to send objects or 
arrays to a server. But then the server is 
going to have to use a JSON library to 
take the data it receives, and convert it 
to arrays, or some other format that the 


server can use. 


Even when you have objects, it’s usually 
easier to represent the object’s values as 
name/value pairs, and just send plain text 
to your server. In general, if you can use 
text for your request, you should use text 
for your response. 
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xml versus json 


So which is the better data format? 



Joe: I know how to make Brussels sprouts, too. That 
doesn’t mean I like them! 

Frank: I just don’t see what you really gain by using 
JSON. Maybe it’s a little easier for you to use, but it’s a 
total pain for me to work with. 

Joe: I don’t know. ThatJSON.php library looked pretty 
easy to get running. 

Frank: Sure, but now I’ve got to teach all my 
programmers how to use JSON. They already know 
XML, and that doesn’t require any special libraries. 

Joe: Well, I still think it’s obvious. JSON rocks! I was just 
reading an article that says it’s much faster than XML to 
send over a network. 

Frank: Yeah, I was just reading another article that said 
the exact opposite! I think it totally depends on the data... 
you can’t prove that JSON is always faster than XML in 
every situation... 

Joe: ...or that XML is faster than JSON! 


Well, it seems pretty obvious... JSON is new, 
ifs JavaScript-friendly, and I don’t need to 
do any weird DOM navigation to get my data. 

__y 


Obvious to whom? I still think XML is the 
clear winner. Ifs a standard, and I don’t have 
to download any libraries to use it in my PHP. 

Besides, you know the DOM. What*s the big deal? 

< _ _ / 


Frank: Right. I guess we’re just not gonna agree on 
this.? 


Joe: Well, we have to pick one format or the other, right? 
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choosing a data format 


Wkick data format 


( - \ 

Look, rd rather be climbing a mountain 
than messing with a bunch of weird data 
formats. I use plain text for everything. 



Tne cltoke •“ 


Ive been designing web pages for years, and all I 
ever needed was HTML, CSS, and JavaScript. I 
doiVt see why I need to learn XML now... Til stick 
with text and JSON for my data. 
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skoulct you use? 


xml versus json 


We have a lot of very well- 
respected clients, and they care 
about speed and standards, not the 
latest fad. We use text for our 
requests, and XML for responses 
from our servers. 




癰# 


•IS 


yours 




I*m all about the new stuff, baby. 
I was the first guy in the office 
to use Ajax, and I use JSON for 
everything. Plain text is boring, 


and XML is so 1998. 
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Just Vo It Solutions 


Before we discuss how JSON and server-side languages like PHP get along, let’s 
take a closer look at how you can access JSON data in your JavaScript. Here’s 
another JSON data structure: 



Below are several values from the JSON structure. Your job is to write the 
JavaScript code that would return the value from the JSON data structure. 
You can assume the JSON data is in an object called jsonData. 





JSON data oV>/6t 


'r 

var bester 5 jsonl7ata.booksU3.author; 


var isbw s JsowPata.bookst J].isbw; 


all tKcsc 
3V-V-3Y $ 七狀七 

at 0, 矜。 七 a 七 I . 



var isbn2 5 jso^ata.booksC23.i$bh ； 



var si 瞧 ows s jsowPata.booksWlauthor; 


var blackHouse 9 jsonl?ata.book$C23.title; 



var straub s jsonl?ata.bookst23.authorU3; 

' 1 ^ 

This joes "to 七 lie 七 Wivd v-o>m... 

•and *to w au*tKov w rtcm.. 

… is a 朽 avvay. A^a >wc 
七 he se6o”d autKov, m position [I]. 
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Awnd?v 1 ： ^v+^as 

A Few Special Bonus Gifts 



Just for you: a parting gift from Head First Labs, in fact, 

you’ll find five special bonus gifts in this appendix. We wish we could stick 
around and tell you about a lot more, but it’s time for you to take what you’ve 
learned and head out into the cold, cruel world of web programming on your 
own. We’d hate for you to take off without a little more preparation, though, 
so take a look at the top five things we just couldn’t squeeze into this book. 

Then you’re done. Well, there’s one more appendix. And an index. And a few 
pages marketing made us stick in... but really, you’re... almost... to the end. 


welcome to the next level 
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ajax toolkits 


# 4 ： Ajax toolkits 


We’ve talked a few times about using an Ajax “toolkit” to handle repetitive 
tasks like creating a request object or sending a request. Once you 
understand how to write this code yourself, you may want to look into a few 
of these toolkits and see if they offer any functionality you might to take 
advantage of. Here are a few of the most popular toolkits: 


Yo^ll also s CC i hcsc 
Dikiis irc-fc^cd io 

aS ^r^ CWo ^ s ^ D ‘七 
W ， .. 心 — 
tHc sar», c tKihj. 


Prototype 


Where to get it: http://prototype.conio.net/ 


Jus 七 js (\\t 

you doy/)rtloddi ■(•vom *b^c Pvo*to*bY?^ 

y/cb site m youv HTML- 


How to use it: 

<head> 

<title>The New and Improved Break Neck Pizza</title> 

<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href=^breakne^k.css^ / > 

<script type="text/javascript" src=^prototype.js^>^</script> 

<script type="text/javascript" src =, ’pizza•js"> </script> 


</head> 

Sending a request: 

var request = 
url, 


Aja>^ Rc<\ucs*t is 七 he Pv-o-fcoiypc JavaSdv-ipi 
dlass 七 ha 七 Kdndles Ajax v-c^ucs-b. 


new Ajax. Request ( 

__. uvl »s URL sc^d tKc to- TWl$ ^ 祕饮 



o\r 


method: 'get', 
parameters : 'phone=2142908762&name=Mary f , 
onSuccess : updatePage, 
onFailure : reportError 






tteves o-f ttc ^tec ^caWcs o( 
pyototyp: you set 吖 sefavate 
■(•uy\d.*t»oir\S *to dt^CVCV\*b 


tteve av*c youv- value 

?aivs 七 V>a*t avc b> 

SCV'VCV'—Side ^V'O^VSw'- 


Handling a response: 


P<ro-to-typ c SChds 

Uh ^ iohs ihc objeH as a 

P? 卞⑽， * 

as a 3 Ual variable 


function updatePage(request) { 

var response = request.responseText; 


kr 
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You (WUccdl k 如 ^ady 
state a^d status todt - Pro"to 七 
docs U you, av^d Here’s a 
? voblcm, youv o^ail^c ^allbad- 





parting gifts 


ifi 


Where to get it: http://dojotoolkit.org/ 

How to use it: 

<head> 

<title>The New and Improved Break Neck Pizza</title> 

clink rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href= 〃 breakneck•css” / > 

<script type=”text/javascript" src="dojo•js"> </script> 

〈script type=’’text/j avascript” src=’’pizza • j s’’> </script> ,,r ^ i^dludc -the dojo.j! 
<script language=" JavaScript" type="text/javascript"> ^ dowhload -fv-om 

ihe Dojo wcbsi-fec. 


dojo. require (''dojo. io .bind") 
</script> 《 

</head> 


|y> s-batid JavaStv-i\>*b, V-U^ dojo.vc«\uivcO oy\ 

all 七 ^ Pojo-to use. 

Ii，s easiest {o P ui all the 

you io use with Doj< 


Sending a request: 

var arguments = { ^ 3 如公唞地 “W 

url : 'lookupCustomer.php f , 

method: 'GET', 

content : 'phone=2142908762&name=Mary 

error : reportError , 

load: updatePage 


dojo io bihd is -fehc Dojo 
padkajc tha-t dorrtaihs Aja) 
dated Code ar»d u-feili-ti cs . 


TV^csc avc 

use P^ 切 ? c . 


dojo.io.bind(arguments) 


O^tt 70U vc set u ? 70UV 

— ， aojo ： «o.bmao, a^d 

^>ass \i 70 UV av^umc^ts. 

Handling a response: 

function updatePage(type, value, evt) 
var response = value; 

} 


f ° j0 CX _ 卜 ^Hb^k Wtio,s 

^ BUc?i scv 的 1 The 

W 、 喊 yo(/|| 
: ^ it , 0 ^ ihS 

the sc^rvc^r s <r«pohSC. 
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#2 ： scriptaculo.us and other UI libraries 

In addition to several Ajax toolkits, there are some great JavaScript 
libraries you can use to build really slick user interfaces (UIs). These 
libraries are just external JavaScript files that you can include and use 
in your applications, whether those apps are asynchronous or not. 


scriplaculo^us 


Where to get it: http://script.aculo.us/ 


Ko*bWm^ … "bKcsc 

jus 七 该 t JavaS6 外七 
•to add *to Y ouv " 衿丁 ML. 


How to use it: 

<head> 

<title>The New and Improved Break Neck Pizza</title> 

<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href= 〃 break^^ck•css” / > 

<script type="text/javascript" src=^prototype. js AA > </script> 
<script type="text/javascript" src="scriptaculous•js"> </script> 

<script type=’’text/j avascript’’ src=’’pizza • j s’’> </script> 

</head> 

sd^rip-t adulo us uses -fcKc 



P^ro-toiypc lib\ra^y -fo^ i-fcs sc ⑽ 



0 O O 


Demos in scriptaculous wiki 


http://wiki.script.aculo.us/scriptaculous/show/ca ^ 


Ify.USy 


demos 

live demos 

nnri nrQD AIAX chopping Cart 

Antocomplgtina AJAX text fieldi 
A..tArnmpletinq fiPlds - customize^, 

hrtahlp element callback 

rnmhinatior Ftfpcts Pemo 

sortables 

rhn«；tlv Sortnble Demo 

c^rtnhlp Floats Demo 

Cnrfnhlp Lists De 啦 

control 

Slider Pemo 


script, aculo.us wiki 

The script.aculo.us Wiki is a place for 
documentation, hints, tipps and tricks for 
the script .aculo.us libraries. 


gpfpnt Activity 

Authors 

Login 

Feeds 

ni^ru^s Demos 


stiiupad 

POWERED p 


… 七 饮把七 ioh' 3hd so¥f\C lowcv*— 

level 山七 ■Puhd'tioiriS. 


sdv*ip*t. 沉 ulo.us has scvcv-al 
JavaSdvi^i libvavics, a^d b>Y\s 
o( too\ To leavn move, 

ou*t tiiciv- demos at 


P^httpV/wjkLsolpt.aQjlo.tJs/scrjptaculGus/show/DemiM 面 


二 ; Match case 1 

★ Location does not exis' 
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0 


Where to get it: http://openrico.org/ 


How to use it: 


H sd\ripiadulo.us, Rido uses 
P'roMypc, as well as a utility lib^a^y. 


<head> 

<title>The New and Improved Break Neck Pizza</t^ile> 

<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href= 〃 br||^akneck:• css” / > 

<script type=’’text/javascript" src=’’prototype• js"> </script> 
<script type=”text/javascript” src=’’rico• js”> </script> 
<script type="text/javascript" src=’’util • js"> </script> 

<script type=’’text/j avascript’’ src=’’pizza • j s’’> </script> 
</head> 


Ukc stn\>iatulo.us, R'»to V^as 

lots d yrtai Ul 心 aW, 
^o-bablv some vcallv tool 如 a?r 


Hcvc, dbra 於叫七以七 W 

i\\t lis-t o( ^arirvCS m*to *tV\C 
^y-d\>V\i6dl bo%cs oy \ tV\C bottom 
i\\t \>ay … all Vittou 七 \>ay 
vcload'mj OV- scv-vcv- mtcv-adtio^! 


r 


©oa 


<^i' 




Rico 


Rico 


企 0 http ： //openrico.org/rico/demos.page?demo=i ▼ Q 砂 nco ajax 


JavaScript for Rich Internet Applications 


CD 



AJAX DEMOS 

Inner Html 
Javascript Updater 


DRAG a DROP DEMOS 

Simple 

Custom Draggable 
Custom Drop Zone 


CINEMATIC DEMOS 

Animate Position 
Animate Size 
Animate Size & Position 
Animate Fade 
Round a Shape 
Color Example 
Rounded Comer Examples 


BEHAVIOR DEMOS 

Accordion 
Weather Widget 
LiveGrid - Data Table 
LiveGnd - Search 


CUSTOM DROPZONE EXAMPLE 


namelist 


Holloman, Debbie 
Barnes, Pat 
Dam pier. Joan 


Alvarez, Randy 


Ne", William 
Hardoway, Kim be r 
Story, Leslie 
Lott, Charlie 
Patton, Sabrina 
Lopez, Juan 



the custom drop zon# 


This example illustrates a custom draggable overriding tRe— 

generic Rico.Draggable. The overrides are explained below: 

activate/deactivate: 

When an object is being dragged that is "acceptable" to the 

S ran h ^ ，1 chan 9 es 作 opacity to indicatae that 

it can be dropped into, (uses Effect.FadeTo) 

showHover/hldeHover 

V^hen an object is over the active drop zone, the opacity is 
£l ang ^ d su £ h that it approaches it's non-opaque value, (uses 


h-m 


tho code 


tniB • nxiinit：_Leinertt 
this.header 


O Find: dojo 

Done 


* 令 （ 丄 ement j j 

* $<header )； 


㊁ Find Next ㊁ Find Previous 固 Highlight all 


I 



Match case 

Location does not exist. 
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inspecting the dom 


#3 ： Inspecting the DOM 

By now, you’re a pro at using the Document Object Model to update your web pages on the fly. 
But once you’ve used the DOM to make changes to your page, how can you see exactly what 
the web browser sees? The answer is to use a DOM inspector: 


:::;峰 


㈣ ::匕 


i o o o 

Top 5 CD Recommendations 

CD 


^ http://www.headfirstlabs.com/books/hrajax/chap ▼ 

__ 〆 

Q ( 

G 




im 




DOM Inspector 


CD 


http://www.headfirstlabs.com/books/hrajax/chapter04/top5/top5.html 


Inspect 


Document - DOM Nodes 


國 ▼ Object - DOM Node 


class 




#document 

HTML 
HEAD 
BODY 


Node Name: 
Namespace URI: 
Node Type: 


IMG 


#text 


Node Value: 


DIV 

instruct... 

nodeName 

nodeValue R 

#text 


alt 

Royal Albert Hall, by C •“ 

DIV 

cds 

sre 

images/cream Jive.jpg 


™l 



class 


top5-lis •“ 


top5 


rank 


rank 

cover 


/ou tati see details a bou£ 
從 h node ih -this pav-t o( 

the VOA/\ ihsped-tov-. 


Start Over 


O Find: / f\ 

i Find Previous | Highlight all □ Match case 

Done / 

Location does not exist. 


f 


YouW C%\>a^di i\\t POM -tv-cc, 
t\\tV oy\ a v\odt -to yi 

details about ?a^6ulav 
灼 ode …七 ^ Pom kxtt- 
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hlOTB : V<> u ^r\ttA *to spc^i-fi^ally \rc«\ucs*t 
VOM *mspc^*to\r be ms-tdlled oy\ tVmdov/s. W\\cy\ youVc 
Fi\rc-fo>c, sclent Cus-fcom |ns*tall, By\A 
Pcvclopcv- Tools. This will ⑶ su\rc ihc VOM 
mspcd*to\r is mstallcd v/i*th you\r \zcrs\oY\ Pi\rc*fo 乂 . 
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Inspecting the POM in Internet Explorer 

You’ll need to download and isnstall a separate tool for inspecting the 
DOM on Windows, using Internet Explorer. 

Where to get it: http://www.ieinspector.com/dominspector/ 


How to use it: 

Just install the EXE file from the IE DOM Inspector 
web site, and install the tool. IE DOM Inspector is 
shareware, so it only runs for 15 days before you 
have to either pay for it or uninstall it. 


Hcv-cs 16 VOM 




tv^c 16 Pom is 

… J '/o'* We 七 

You’ll V>avc *to ㈣ 

use \i -fov- wove 1^ da7 s - 


G °° e，e - Micros °ft Internet Explorer 


R，e Edit View favorites Tools Help 


0 回⑻ 




Google 



TTi 1 * I ^ ^ Web Smijfis 

ii±__ . • I ta I ^ s 粕， 

i f <> <H£AD> _l 

0" lniages/Flashes( 2 / 0 ) 

-」Cj Forms (1) 

BQES3] Mname= ' raC ^' VSear0h ''> 

5 〈 SCRIPT 〉 

5 <SCRIPT> 

^ <SCRJPT> 


^ Emsals LssmI 



FONT-FAKILy ： arial, sans _ serif 
F0NT _ FAH 耻 «ial,3an 3 - 3erif 


Inspecting the POM in Safari 

To inspect the DOM in Safari, you’ll need to use WebKit. 
WebKit is the open-source system framework used by Mac OS X 
apps like Safari, Dashboard, and Mail. 


0 O O Terminal — bash — 80x8 


Where to get it: http://webkit.opendarwin.org/ 

How to use it: 

Download WebKit from the project web site. Then, 
enter the following command in a Mac OS X 
Termainal prompt: 




1 http I 


^ h»ad^ruUitH.com/bookf/hraj4)i/cVuipc> C(« 


iit 
rou wont 
k the 
to dear 


v7 


冰孙 d select j 

flcmC〆 ， 匕吖仏 C POM 
\^tbo>r rn Sa^avi Web 仪 . 



[bmclaugh 卜 ] $ defaults write com.apple.Safari WebKitDeveloperExtras -bool true 函 
[bmclaugh:^]$ | 

Q 


A 


▼ cbodr> 

> <dhr td« a #ntriKUom*> C 

> <dhr td«*cdi*> «tmg cUi 

¥ <dhr »d«*«opS-listings a > 
. <iorm> - .、• rypt 


1 

Node Typr: I 


Node Type: OMnrn« 
Node Name: HIM 

URI: hrtp /乃_ 


MW/Khtml 


Markup 4 Content 

<KTlll><WAT>> <TITIF>Top 


.> <MfAD> <TITtF>Top S CO 
mtrxJjtlonf < mTlf > <UNK rel 
Iral/Ctl* h>rf«*1op\ <^Cl 

” »rc-*ws.jl*> - 

I'HCAO^^iOOV ofUo*J - *«ddOfiClKkJ 
I**in\lfuclion%*> 0*(k on • CO covrr 
•s«. H you 食 to iUft emf. dM 
to rl#Ar th# T6p ^ l*d </OfV> 


> <UNK rd-*trHeshe«(* 
;.m*> <sCRirr 
*WS.J|*> </SCRJPT> 
*ddOnClKkH 4 ^dkr» 0 ; a > <DfV 
I a CO cover lo tf lo ifir 
in evtf. eMcft the *St 澹 rt Owtf* 

d </orv> <ow td»Vd«*> 


ow»»* ^r< • "amjQr % /v 4 uqh 4 n.no 
Dd. by Sc«^c lUy Vjugh*n a > <1 


3 


> —— u 
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#4 ： Using JSON libraries in your PHP scripts 

You’ve already seen how JSON can help you send and receive complex 
objects in your Ajax apps. But for PHP scripts, you’re going to need a library 
if you don’t want to type in your JSON manually. Here’s how you can use 
JSON in your PHP scripts, without needing to type in the JSON by hand: 


JSON-PHP 



JSOK-PttP ^obably tKc easier J 咖 
此 , toPHP |Vs easy 

ur\S*bdll 3\r\d <aSC- 


Where to get it: http://mike.teczno.com/json.html 


How to use it: 


pivst, use vc<\wv-c_o^6cO 
-to rndUdic 

^,| c you do^oaded from 
七 JSOK-PHP 


require once('JSON.php r ) r 
$json = new Services 一 JSON() 


. v/ariaWc, ass.， a 

C :T 知 s 一一她 、:？ ,s 
r PttP data struts. 


You trtait a 听孙 d 
vanablcs just as 70 U ^allv 
v^ould rn 70 UV PHP toAt. 

IAA>cn youVc \rc3dy *to dohvcvi 
youv da*toi stvud-tuvc *to JQOI^I, 

use youv Scvvidcs__JS^)/\/ 

object \ruh eModeO 。的 

youv- PHP variable. 

^all 7 , use ? -tO se,d tV>e eroded XON 
batk b> «r estin ?» ^ 


，，匕 以 ;; ' 


$orderl = array('name 


=> 'Jim- 


'size A 

=> 

'large" 

'beverage A 

=> 

'mocha A 

' coffeemaker ， 

=> 

1 )； 

'name ， 

=> 

'Bob 、 

'size A 

=> 

'medium 

'beverage A 

=> 

' latte^ 

k coffeemaker A 

=> 

2); 


$orders = 

array('coffeeOrders，=> 

array($order1, $order2)); 
$output = $json->encode($orders); 
print($output); 
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#5 ： Using evalO with 7SON 

In Chapter 7, you saw how you can use the eval () function to evaluate 
JSON returned from a server-side script: 


The evalO 

iakes a JSON v-cs^sc, 
a^d 6o^vcv-ts \i m*to a 
object 


function updatePage() { 

if (request.readyState == 4) { 

if (request•status = 二 200) { 

var jsonData = eval('(' + request .responseText + ')’） 

^ - - ^ 

// Get the updated totals from the XML response 
var totalBoards = jsonData .totals[0].boardsSold + 

jsonData.totals[l].boardsSold + 
jsonData.totals[2].boardsSold + 
jsonData.totals[3].boardsSold, 


The problem with eval () is that it runs the JSON response from the 3 PROJECT: CttAOS) 


server without any security checks... if some malicious organization was 
able to tamper with your server’s response, you could end up running some 
harmful code in your JavaScript. 



Use a JSON parser 

If you’re concerned about security with JSON, you may want to use a 
JSON parser, and avoid using eval () in your JavaScript functions. 


Where to get it: http://wwwjson.org/js.html 




How to use it: 


/oi/ll Kavc -to iKc file 

y° u dov/hload -fv-om the jsoh ov-g web site, 
usir^ lass ih youv- HT/WL. 



A JSON pavsev 
Will o^ly atttyi 
stvmj 七 … 
a^Y*b^nr»5 else is 
kidkcd out No 

stM\bj v-isk! 


function updatePage() { 

if (request.readyState 二 = 4) { 

if (request.status = 二 200) { 

var jsonData = JSON.parse(request.responseText); 

// Get the updated totals from the XML response 
var totalBoards = jsonData. tot^^^^^^boardsSol^^^ 



row 
scv-vcv 

tovwcvb 士 士 

dv\ object. 
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Awnd?v 2 ： am an\> POH 


^All I Want Is the Code/ 9 



It’s time for a little bonus credit, within the 

pages of this appendix, you’ll find some of the utility code 
that was a little advanced for when you ran across it earlier 
in the book. By now, though, you should be ready to tackle 
these Ajax and DOM utility functions head-on. 


welcome to the next level 
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creating a request object 


ajaxjs 



fui all -this todt ih a -file dalled ajax.js. 
/ou dall i-t 扣 ythih3 you like, as I 。％ as 

you youm HTML <s 仆 i 吟佺 3 io 代 4 

"the v-iglvt -filename. 


You’ve seen this code plenty of times by now. This little bit of JavaScript takes care of 
creating a request object, and makes sure that the object will work on all modern web 
browsers, from Internet Explorer to Firefox to Opera. Get used to this code if you’re not 
already... ifs the foundation of every Ajax application. 

\/ou II see a lot todt tKat uses ^alsc 


var request = null 




We, oUullW 如七二七够 k 

ov , some vc^ov^s 16. v^ull, 


Code V«ll 讀 k ⑽ all 



try { 

request = new XMLHttpRequest() 

} catch (trymicrosoft) { 
try { 

request = new ActiveXObject (''Msxml2 .XMLHTTP A, ); 

} catch (othermicrosoft) { 

try { k 

request = new ActiveXObject (''Microsoft .XMLHTTP") 
} catch (failed) { 


request = null 



Pol low tiic dode … *tVmgs up heve 
i-f all ihc di-f-fcvchi at 

^veatmg a v-c^ucst object -fail- 


Rcmcmbcv ； you^vc jo-t -fco 
七 iry X 亂 

*fo\r b\rowscvs like O^a 

Ad /Wozilla, a^d iKc^ 

侈 y hh^O^tti -fov 
Explow. 


if (request == null) 

alert (''Error creating request object! r, ); 



队从 admi-b .t- tw»s tv>c most 
robust v/37 to ^d\t cwovs. v>ov/, 


4-knuaK. VOU rt 
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ajax and dom utilities 


Using ajax.js 


You can use ajax.js by adding a <script> tag to the 
<head> section of your web page’s HTML and referring to 
the file’s name, like this: 


ThiS iS ^ <h ^d> senior* o( 
ah ^TA/jL page. 


<head> 

<title>The New and Improved Break Neck Pizza</title> 

<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href= 〃 breakneck•css 
<script type=”text/javascript" src="ajax•js”> </script> 
<script type="text/javascript" src="pizza•js"> </script> 
</head> 

TKis spate is veally ir^ovtah 七 … >wi*tKou-t it 
some bvowsevs v/on ’七 load 七 he JavaSdvipt -file 
you v-c-fcv- bo >wi*tK svd attribute- 


/> 

tWis dasc, tWis HTML 

VC-fcvs "to 3s >wcll 

JavaStv-i\>*t -file ； js. 


Now tell me again why I shouldiVt use 
one of those fancy Ajax toolkits I keep 
seeing on the Web. Don*t those offer all 
sorts of extra functionality? 



Don’t use what you don’t understand 

There’s nothing wrong with using an Ajax 
toolkit, especially if the toolkit takes care of 
lots of routine and repetitive tasks. That’s all 
ajax.js really does: it takes code that you 
need in every single Ajax application, and it 
tucks it away in a file that you can use and 
refer to over and over. 

But, you shouldn’t just grab the coolest 
looking toolkit you can find, stick in a 
<script> tag, and hope for the best. Open 
up the JavaScript for the toolkit and figure 
out what’s going on. After 400 pages of 
asynchronous programming, that shouldn’t 
be too much of a problem! 
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changing a web page 


te 灶 - ufils.js _ 

Once you’ve got your asynchronous JavaScript taken care of, you’re ready to tackle some 
DOM code. You learned about the Document Object Model in Chapter 4, but we used the 
text-utils.js file in several earlier chapters... before you were the DOM guru that you’ve 
since become. Here’s the code for text-utils.js, along with lots of notes on how it works. 


function replaceText(el, text) { 
if (el != null) { 

clearText (el) ; 4^ - - ^ 一 

var newNode = document 


lakes 七 ， d plates all 




you su ?? ly- 


• createTextNode (text) ; ^ -to 

el * appendCh±ld (newNode); 1 ^ wc ^ ^ do,u, c ^ 

■to drcaic a ic%i hodc, a^d -thch 
append \i io tK c dcmc^s tWM ^odcs. 


.UavTe^O ^oves all .W,ia .odes 
如 clcmc^ You ? ass -to WW" 


function clearText(el) { 
if (el != null) { 

if (el.childNodes) { 

for (var i = 0; i < el.childNodes.length; i++) { 

var childNode = el.childNodes[i]; ] 

el.removeChild(childNode) ; ^_TKis loops iKrou^K a!! iht 乩 ild 


nodes ， a^d v-emoves eddli ov\c 


iVatdli ouW TKis 


vemoves 


all tW\\d 


nodes, even i-f tKcy avent 七 wt nodes. 


匕 ~v-ciuv-y\s i\\t -fov- i\\t 

function getText(el) { c | cmc ^ you pass 

var text = '、"； TKis loops -tK^oujK all -tKe tWM 

if (el != null) { ^，odes o-f tKe supplied eUe.t 

if (el. childNodes) { ^ IT 叫娜 ⑽. 

for (var i = 0; i < el.childNodes.length; i++) { 

var childNode = el. childNodes [i]; 

if (childNode. nodeValue ! = null) Rc^cwIdcv-, clcwc^t ^odcs o 

text = text + childNode. nodeValue; r^odts have a ⑽ 11 v\odt\/BWt- 

} ^ This takes ihc ^odcl/aluc -fov- all *twt 

j ^odcs ； wliidh is ihc ar\d adds ii 

j h> a^y 

} retUrn teXt； va,，able .,11 Kav C all tKe . 

七 he element >N^C>T\ 七 his -fuy\C.t»o>r\ -fivvisKcs. 
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ajax and dom utilities 


Using text - utils • j s 

You can use text-utils.js by adding a <script> tag to the 
<head> section of your web page’s HTML, just like you 
did with ajax.js: 


<head> 

<title>Aj ax-powered Coffee Maker</title> 

<link rel= 〃 stylesheet 〃 type= 〃 text/css 〃 href= 〃 coffee•css 〃 /> 
<script type=”text/javascript” src=”ajax•js”> </script> 
<script type=" text/javascript" src= A, text-utils . js^> </script> 
<script type="text/javascript" src="coffee•js"> </script> 
</head> ^ 

bo leave 3 betwW 
the a^d tlos'mj 

•tay, so all bv-o>Nscvs Will load 70^ 

JavaSdvi? 七 . 
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Break Neck app 308 
Break Neck JavaScript 296 
browser 40, 42, 43, 44, 46, 84, 303. 

See also web browser 
browser-dependent 312 
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cache 302, 303 
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coffee maker 145 
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content type 308, 309, 310, 311, 313, 362 
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createRequest() 9, 10, 31, 35, 42, 46, 63, 85, 86, 
90, 93, 100 

creating two request objects 189, 192 
createTextNode 205, 270, 292 
CSS 203, 207, 247, 268, 285 
CSS styles 274 
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database 96, 335 
data format 361 
decoding 304 
document 205, 227, 231 
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document.createTextNode 296 
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82, 124, 167, 174, 183, 201, 203, 207, 223, 
229, 274, 352 
branch 215 
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versus innerHTML 183 
Dojo 393 
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web site 393 
DOM 203, 204, 225, 289 
DOM tree 226, 228, 231, 232, 234, 235, 267, 
274, 351, 363 
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drag-and-drop 397 
dummy parameter 118， 119 
dynamic HTML xi, 2, 65, 356 

E 

element node 216, 227, 233, 274 
Elements 222, 233 
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empty value 17, 30 
encoding 304 
Error messages 294 
escape() 97, 100, 298 
Espresso Talk 164 
event handlers 76, 229, 247, 254. 
See also onBlur 
See also onChange 
See also onClick 
See also onFocus 
adding event handlers 254 
external CSS stylesheet 246 



Firefox xxviii, 124, 305 
firstChild 232 
divNode.firstChild 232 
forms 

clearing 174 
submit 5, 31 

frameworks. See Ajax toolkits 


GET request 297 
GET requests 362 
getAttribute() 235 
getAttributeNode 240 
getBeverage() 155 
getBoardsSold() 119 
getCustomerInfo() 125, 285 
getElementById() 50, 56, 83, 284, 301, 310, 
354, 368. 

See also Document Object Model 
getElementsByTagName() 205, 254, 354, 368 
GET request 299, 301, 302, 304, 308, 312, 313 
GET requests versus POST requests 298 
request security 304 
getSize() 155 
getText() 52, 56, 167 
getTimeQ 119 


H 

headfirstlabs 349 
headfirstlabs.com 321 
Head Rush Ajax xxi, 365 
Head Rush learning principles. 

See learning principles 
HTTP ready states 104 
See also readyState 

HyperText Markup Language (HTML) xxii, 

xxviii, 22, 40, 45, 60, 68, 74, 75, 77, 203, 
281,285,290 
4.01 222 
radio button 162 


G 

GET 26, 29, 100 
GET parameters 306 
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4 id”attribute 205, 231 
innerHTML 183 
versus DOM 183 
insertBefore 269 

Internet Explorer xxviii, 45, 59, 89, 90, 115, 116, 
255,305, 312 
7.0 93 

iterative development 151, 157 


J 

Java xxviii 

JavaScript xxii, xxviii, 2, 10, 29, 40, 46, 58, 74, 
76, 77, 81, 92, 102, 108, 116, 231, 253, 
282, 311, 323, 327, 349 
external files 154 
static 124, 156 
JSON 361, 369-390, 398, 399 
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leaf 215 
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what you can do xxvii 

lookupCustomer.php 324, 330, 331, 333, 334 


M 

‘Mg” 205 
magic quotes. 

See PHP, magic quotes 
Math.round() 56 
meta-language 360 
Microsoft.XMLHTTP 124. 

See also ActiveXObject 
Mozilla xxviii, 45 
Msxml2 124. 

See also ActiveXObject 
MySQL 96, 326. 

See also database 
mysql_close 348 
mysql_error() 348 
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MySQL databases 335 

N 

name/value pairs 301, 304, 309, 310, 313, 363, 

365 

newSpanElement 270 
node 214, 215, 235 
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Node object 235 
node Value 233 
null 17, 30, 235 
empty value 17 
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o 

O’Reilly xxxi 
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onBlur 34, 78, 79, 80 

See also event handlers 
onChange 34, 60, 78, 79, 80, 254 
See also event handlers 

onClick 34, 35, 42, 60, 76, 79, 153, 159, 247, 
250, 251 ， 254, 272, 273, 282 
See also event handlers 
onFocus 34, 78, 79 

See also event handlers 
onLoad() 255 

onreadystatechange xi, 46, 47, 48, 49, 54, 63, 
99, 102, 105, 106, 107, 301, 310 
See also request object 
open() 301, 306 

Opera xxviii, 116, 124, 284, 305 
Order 227 
order 225, 346 
left-to-right 225 
orderCoffee() 155 


P 

parent 215, 235 
parent element 215 
parentNode 232 
parent node 215 
parsing the XML 350 

PHP 22, 73, 94, 95, 98, 102, 105, 176, 285, 286, 
331 

magic quotes 326 
PHP 6 326 
PHP request 285 
securing scripts 330 
PHP script xi, 206, 281, 285, 303 


pizza.html 285, 291 ， 305, 311 
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placeOrder.php 283, 285, 286, 294, 298, 299, 
300, 301, 305, 306, 307, 308, 309 
Podcasting Studio 102, 229 
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POST data 299 
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POST data 309, 310, 313 
mysterious data 307 
web servers unencode POST data 300 
POST requests 297, 299, 300, 302, 303, 304, 
305, 306, 308, 311, 312, 313, 315, 362, 
365 

GET requests versus POST requests 298 
send more data 301 
pre-assembled JavaScript 16, 86， 166 
PROJECT: CHAOS 128, 137, 320, 332, 335 
proprietary 341 
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radio button 162 
raw data 23 

readyState xi, 49, 54, 55, 60, 63, 65, 102, 103, 
124, 133, 134, 193, 292 
4 135 
abort() 193 
resetting 193 
set to 4 55, 56, 107 
relative URL 132 
reloading 229 
replaceChild() 290, 296 
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replaceText() 51, 52, 56, 168, 369 
See also text-utils.js 
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request.getResponseHeader 295, 309 
request.responseText 204 
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request data 300 
request header 310, 362, 365 
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request. send() 100 

request, send(null) 43, 71, 85, 99, 101, 105 
request URL 132, 134, 159, 297, 299, 304, 308, 
310,313,315 
request URLs 98, 118 
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response data 2, 104 

responseText 48, 49, 50, 63, 102 ， 105， 109 
responseXML 102 
response headers 295 
responseText 292, 350, 367. 

See response data; responseText 
responseXML 350, 353, 367. 

See response data; responseXML 
rich Internet applications x, 1 
Rico 397 

root element 205, 215, 225 
Ruby on Rails xxviii 

s 

Safari xxviii, 124, 305 
script.aculo.us 394 
Security Warrior 320 
send() 30, 99, 100, 304, 365. 

See also request.send() 
send(null) xv, 279 


send more data xv, 279, 301 
sendRequest() 156 
serialization 363 
serveDrink() 155 
server 295, 306, 338, 341 
server’s response 37, 44 
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showConfirmation() 283, 290, 294, 296, 301, 
302 
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133, 144, 196, 265, 302, 303, 312, 330, 
354, 360 
SQL 324, 325 
SQL injection 323, 327, 335 
attacks 326, 331, 332 
protecting against 328 
in your PHP scripts 334 
SQL query 325, 331 
SSL 304, 315 
secure sockets layer 315 
standardized 341 
startOver() 272, 273 
static JavaScript. 

See JavaScript, static 
status 292 

status code 131, 133, 134, 136 
200 131 
404 135 

status codes xi, 49, 63, 65 
submitOrder() 281, 283, 285, 301 
substring() 179, 180 
synchronous 140 ， 164， 196 
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tag name 354 
Team Chat 297, 326 
tech reviewers xxx 

text-utils.js 51, 53, 56, 166, 214, 404, 405 
See also clearText() 

See also getText() 

See also replaceText() 

See also Document Object Model (DOM) 
text node 216, 233, 240 
text node objects 226 
text order confirmation. 288 
this 258 

toolkits. See Ajax toolkits 
top5.css 246, 249, 256, 268 
top5.html 246, 249 
top5.js 247, 248, 252 
traditional web applications 2 
limitations 
page is redrawn 2 
page reloads 2 
waiting around 2 
true 294 

two-THOUSAND 312 
types of data 315 
binary objects 315 
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plain text 315 
XML 315 


u 
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updatePage() 11, 36, 44, 47, 48, 50, 54, 55, 56, 
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204, 207, 285, 356 


user interface (UI) 396 
drag-and-drop 397 
Rico 397 

script.aculo.us 396 


V 
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var imgElement 258 

w 

web browser 116 

See also browser 
web server 84 

World Wide Web Consortium 223, 347 
W3C 223, 360 

X 

x-www-form-urlencoded 315 
XHTML 45. 

See also HTML 
XHTML 1.0 222 
XHTML 1.1 222 
XML 2, 5, 310, 337, 347 
meta-language 360 
parsing the XML 350 
XML documents 364 
XML language 361 
XML requests 313, 337, 362, 365 
XML responses 337, 362 
responseXML 350 
XMLHTTP 124 

See also ActiveXObject 
XMLHttpRequest 17, 90, 93, 124 
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